css15种居中的方式(CSS元素居中浅析)
# 内联元素水平居中 在CSS中要使内联元素水平居中的方法是给它的父级元素添加,今天小编就来聊一聊关于css15种居中的方式?接下来我们就一起去研究一下吧!
css15种居中的方式
# 内联元素水平居中
在CSS中要使内联元素水平居中的方法是给它的父级元素添加
text-align: center;
样式即可。
# 内联元素垂直居中
在css中要使内联元素垂直居中的方法是给它的父级元素添加 line-height
样式,当line-height
的值等于父级元素的高度时,元素就垂直居中了。
# 块级元素水平居中
要使块级元素水平居中,添加
margin: 0 auto;
样式即可做到,也可以写成
margin-left: auto;
margin-right: auto;
# 块级元素垂直居中
块级元素垂直居中,在css中没有现成的方法可以使用,但是万能的position样式可以办到,像这样:
position: absolute;
top: 50%;
transform: translateY(-50%);
即可实现块级元素垂直居中,但是需要注意的是,需要将这个块级元素的父级元素的 position
值设置为 relative
,像这样:
position:relative;
# 块级元素垂直水平居中
如果需要将块级元素设置为水平垂直居中,则这样:
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
即可,同样需要将这个块级元素的父级元素的 position
值设置为 relative
,像这样:
position:relative;
原创内容,更多请访问我的博客(https://www.qiuxiaochao.com)
,免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com