居中在 CSS 中用的也比较常见,总结几种自己比较熟悉的居中的写法。当然,肯定还有更多更不错的写法,对于文中不足的地方也欢迎指正。
假设现在给出这种场景:
< div class= "parent" >
< div class= "child" >
黑马学院
</ div >
</ div >
其中在 class='child' 这个 div 中的内容长度是不一定的,现在需要实现这个 div 的居中。
水平居中 1.1 display: inline-block 在块级父容器中让行内元素或者类行内元素居中,只需使用 text-align: center,
这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。
. parent {
text-align : center
}
. child {
display : inline-block ;
/* 子元素文字会继承居中,因此要在上面写上向左边居中 */
text-align : left ;
}
有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙,这不是什么 bug ,特性就是如此。。
1.2 display:tabletable 元素的宽度也是跟着内容走,居中的时候加上 margin 即可。
如果不设置成table,设置成别的块级元素也可以,但是要强调设置宽度width,不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好,如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)
. child {
display : table ; margin : 0 auto ;
}
1.3 position: absolute absolute 元素的宽度默认也是由内容决定
这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流,需要注意的是如果定位为绝对定位的话,父元素一定要进行定位设置。
. parent {
position : relative ;
}
. child {
position : absolute ;
left : 50 % ;
transform : translateX (- 50 %)
} 1.4 dispaly: flex 只兼容IE10+
. parent {
display : flex ; justify-content : center ;
}
. child {
margin : 0 auto ;
} 2.垂直居中2.1 display: table-cell 可以使高度不同的元素都垂直居中
. parent {
display : table-cell ;
vertical-align : middle ;
} 2.2 position: absolute.
. parent {
position : relative ;
}
. child {
position : absolute ;
top : 50 % ;//这里相对的百分比对象是父元素
transform : translateY (- 50 %) ; //这里的百分比相对的是子元素
} 2.3 display: flex
. parent {
display : flex ; align-items : center ;
}
/* 或者 */
. child {
margin : 0 auto ;
}
css布局有各式各样的方式,只要选择自己习惯的布局,总能写出美丽的页面。
假设现在给出这种场景:
< div class= "parent" >
< div class= "child" >
黑马学院
</ div >
</ div >
其中在 class='child' 这个 div 中的内容长度是不一定的,现在需要实现这个 div 的居中。
水平居中 1.1 display: inline-block 在块级父容器中让行内元素或者类行内元素居中,只需使用 text-align: center,
这种方法可以让 inline/inline-block/inline-table/inline/flex 居中。
. parent {
text-align : center
}
. child {
display : inline-block ;
/* 子元素文字会继承居中,因此要在上面写上向左边居中 */
text-align : left ;
}
有多个 child div 的时候如果设置 display: inline-block 的时候需要注意每个 div 之间会有缝隙,这不是什么 bug ,特性就是如此。。
1.2 display:tabletable 元素的宽度也是跟着内容走,居中的时候加上 margin 即可。
如果不设置成table,设置成别的块级元素也可以,但是要强调设置宽度width,不然会拉伸成父元素的宽度。(注意加上 width 这种方法拓展性不好,如果 child div 里面的内容很长的话可能超过设置的 width 的宽度)
. child {
display : table ; margin : 0 auto ;
}
1.3 position: absolute absolute 元素的宽度默认也是由内容决定
这种方法的优点是居中的元素不会对其他元素产生影响 脱离正常流,需要注意的是如果定位为绝对定位的话,父元素一定要进行定位设置。
. parent {
position : relative ;
}
. child {
position : absolute ;
left : 50 % ;
transform : translateX (- 50 %)
} 1.4 dispaly: flex 只兼容IE10+
. parent {
display : flex ; justify-content : center ;
}
. child {
margin : 0 auto ;
} 2.垂直居中2.1 display: table-cell 可以使高度不同的元素都垂直居中
. parent {
display : table-cell ;
vertical-align : middle ;
} 2.2 position: absolute.
. parent {
position : relative ;
}
. child {
position : absolute ;
top : 50 % ;//这里相对的百分比对象是父元素
transform : translateY (- 50 %) ; //这里的百分比相对的是子元素
} 2.3 display: flex
. parent {
display : flex ; align-items : center ;
}
/* 或者 */
. child {
margin : 0 auto ;
}
css布局有各式各样的方式,只要选择自己习惯的布局,总能写出美丽的页面。