给父元素设置text-align:center
。
.parent{
text-align:center;
}
"parent">水平居中
优缺点
只需给需要居中的块级元素加margin:0 auto
即可,但这里需要注意的是,这里块级元素的宽度width值一定要有
.center{
width:200px;
margin:0 auto;
border:1px solid red;
}
"center">水平居中
优缺点
不定宽即块级元素宽度不固定
通过给要居中显示的元素,设置display:table
,然后设置margin:0 auto
来实现。
.center{
display:table;
margin:0 auto;
border:1px solid red;
}
"center">水平居中
子元素设置inline-block
,同时设置父元素text-align:center
。
.parent{
text-align:center;
}
.inlineblock-div{
display:inline-block;
}
"parent">
"inlineblock-div">1
"inlineblock-div">2
只需把要处理的块状元素的父元素设置display:flex,justify-content:center
;
.parent{
display:flex;
justify-content:center;
}
"parent">
"flex-div">1
"flex-div">2
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
优缺点
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
width: 100px;
height: 100px;
left: 0;
right: 0;
margin: auto;
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
width: 100px;
height: 100px;
left: 50%;
transform: translateX(-50%);
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
缺点: 使用transform兼容性不好(ie9+)
text-align:center
了,但是这个只对行内内容有效,所以我们要使用 text-align:center
就必须将子元素设置为 display: inline;
或者 display: inline-block;
;margin: 0 auto;
,因为这都是一两句代码能搞定的事,实在不行就是用绝对定位去实现了。原理:line-height的最终表现是通过inline box实现的,而无论inline box所占据的高度是多少(无论比文字大还是比文字小),其占据的空间都是与文字内容公用水平中垂线的。
.parent {
height: 200px;
line-height: 200px;
border: 1px solid red;
}
"parent">
好好学习
优缺点
.parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
.son{
vertical-align: middle;} /*默认是基线对齐,改为middle*/
优缺点
通过设置父元素table
,子元素table-cell
和vertical-align
vertical-align:middle
的意思是把元素放在父元素的中部
.parent {
display: table;
height: 400px;
border: 1px solid red;
}
.son {
display: table-cell;
vertical-align: middle;
}
"parent">
"son"
>多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本多行文本
第一步:给父元素设置postion。
第二步:设置要垂直居中的块级元素postion:absolute/relative/fixed
。
第三步: 设置margin=高度的负一半。
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
height: 200px;
width: 100px;
top: 50%;
margin-top: -100px;
border: 1px solid orange;
}
"parent">
"son">
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: absolute;
bottom: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 200px;
border: 1px solid orange;
}
"parent">
"son">HelloWorld
在需要垂直居中的父元素上,设置display:flex
和align-items:center
.
要求:父元素必须显示设置height值
.parent {
display: flex;
align-items: center;
height: 400px;
border: 1px solid red;
}
"parent">
"son">HelloWorld
优缺点
原理:text-align: center; 控制行内内容相对于块父元素水平居中,然后就是line-height和vertical-align的基友关系使其垂直居中,font-size: 0; 是为了消除近似居中的bug
.parent{
height: 150px;
line-height: 150px; /*行高的值与height相等*/
text-align: center;
font-size: 0; /*消除幽灵空白节点的bug*/
}
.son{
/*display: inline-block;*/ /*如果是块级元素需改为行内或行内块级才生效*/
vertical-align: middle;
}
font-size: 0;
才可以完全的垂直居中;不过需要注意html中parent包裹son之间需要有换行或空格;熟悉line-height和vertical-align的基友关系较难.原理:CSS Table,使表格内容垂直对齐方式为middle,然后根据是行内内容还是块级内容采取不同的方式达到水平居中
.parent{
height: 150px;
width: 200px;
display: table-cell;
vertical-align: middle;
/*text-align: center;*/ /*如果是行内元素就添加这个*/
}
.son{
/*margin: 0 auto;*/ /*如果是块级元素就添加这个*/
width: 100px;
height: 50px;
}
display: table;
才生效;table-cell
不感知margin,在父元素上设置table-row
等属性,也会使其不感知height;设置float或position会对默认布局造成破坏,可以考虑为之增加一个父div定义float等属性;内容溢出时会自动撑开父元素。.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
border: 1px solid orange;
}
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: relative;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
.parent {
position: relative;
height: 400px;
border: 1px solid red;
}
.son {
position: absolute;
left: 50%; /* 定位父级的50% */
top: 50%;
transform: translate(-50%, -50%); /*自己的50% */
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
.parent {
display: flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
/* aa只要三句话就可以实现不定宽高水平垂直居中。 */
height: 400px;
border: 1px solid red;
}
.son {
border: 1px solid orange;
}
"parent">
"son">HelloWorld!
参考文档:
干货!各种常见布局实现+知名网站实例分析