解决 居中 问题

<div class="parent">
  <div class="child">DEMO</div>
</div>

水平居中

(1)inline-block + text-align
优点是兼容性好。
inline-block 内容有多宽,就是多宽。
text-align 对inline元素有用。但是需要一些代码修复,text-align:center造成的问题。

<style type="text/css">
	.parent {width: 200px; height: 30px; text-align: center;background-color: #ccc;}
	.child {display: inline-block;background-color: #369;}
</style>

(2)table + margin
table 即像block元素,宽度又跟着内容走。
优点是指设定了child元素,不关系parent的样式。在ie8支持。

<style type="text/css">
	.parent {width: 200px; height: 30px; background-color: #ccc; }
	.child {display: table; background-color: #369;margin: 0 auto;}
</style>

(3)absolute + transform
transform:translateX(-50%)	移动自身的-50%的像素。
问题:主要是兼容性的问题,transform是css3.

<style type="text/css">
	.parent {position: relative; width: 200px; height: 20px; background-color: #ccc;}
	.child {position: absolute; left: 50%; transform: translateX(-50%); background-color: #369;}
</style>


(4) flex + justify-content
优点:只需要设定父元素。
或者对child 设定 margin: 0 auto;
缺点:低版本的不支持flex

<style type="text/css">
	.parent {display: flex; justify-content:center; width: 200px; height: 20px; background-color: #ccc;}
</style>

垂直居中
(1)table-cell + vertical-align
变成单元格,加上vertical-align:middle;
优点:兼容性比较好。

<style type="text/css">
	.parent {display: table-cell; vertical-align: middle; height: 100px;background-color: #ccc;}
	.child {background-color: #369;}
</style>

(2) absolute + transform
<style type="text/css">
	.parent {position: relative; height: 100px;background-color: #ddd;}
	.child {position: absolute; top: 50%; transform: translateY(-50%);}
</style>

(3)flex + align-items
优点只需要设定parent。

<style type="text/css">
	.parent {display: flex; align-items:center; height: 100px;background-color: #ddd;}
	.child {background-color: #369;}
</style>


水平和垂直都居中

(1) inline-block + text-align + table-cell + vertical-align

<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		text-align: center;
		display: table-cell;
		vertical-align: middle;
	}
	.child {
		background-color: #369;
		display: inline-block;
	}
</style>

(2)absolute + transform
<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		position: relative;
	}
	.child {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

	}
</style>

(3)flex + justify-content + align-items
<style type="text/css">
	.parent {
		width: 100px;
		height: 100px;
		background-color: #444;

		display: flex;
		justify-content: center;
		align-items:center;
	}
	.child {
		background-color: #369;
	}
</style>
时间: 2024-10-10 14:39:17

解决 居中 问题的相关文章

【转】如何只用CSS做到完全居中

英文原版链接:http://codepen.io/shshaw/full/gEiDt 我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到: 1 2 3 4 5 .Absolute-Center {   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; rig

让div等块级元素水平以及垂直居中的解决办法

一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中. 二.解决办法 1.CSS让div等块级元素水平居中 原理:让一个div等块级元素水平居中,直接用CSS就可以做到.只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得d

让DIV中的内容水平和垂直居中

让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1.让层水平居中 1 2 3 4 5 .cla

实用技巧:如何用 CSS 做到完全垂直居中

本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中.我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到: 1 2 3 4 5 .Absolute-Center {   margin: auto;   position: absolute;   top: 0; left: 0; bottom: 0; right: 0; }

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 .mydiv{ 2 m

css自适应水平垂直居中

要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半..mydiv{    width:300px;     height:200px;     position:absolute;     left:50%;     top:50%;     margin:-100px 0 0 -150px } 该方法

如何让DIV相对于body水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中 说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. .mydiv{      

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今天暴风彬彬将分享一个完美通过CSS实现垂直居中的方法,该方法是由aka Yuh?发明的,这个方法也是目前暴风彬彬觉得最完美最简洁的CSS垂直居中实现方法.下面来看看暴风彬彬曾经总结的笔记,大家有不同意见请多拍砖: 先来看看实例效果Demo 该CSS垂直居中的条件: 1.已有一个已定义高度的容器(如<

如何水平居中一个元素

在项目中经常会遇到居中问题,这里借鉴度娘的众多答案,做一个总结: 一.元素的水平居中 1.行级元素的水平居中 <div style="width: 200px;height: 100px;border: 1px solid cyan; text-align: center;"> <span>行级元素水平居中</span> </div> 很明显:子元素为行级元素时,只需要设置父元素 text-align:center 即可. 2.块级元素的