欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

CSS元素居中

 

# 内联元素水平居中

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;

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r17320.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-01-12 10:04 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。