CSS中的居中命令是非常重要的,因为它可以帮助我们实现网页元素的居中显示。下面我们来介绍几种常用的居中命令。居中文字:text-align:center; 居中块级元素:margin:0 auto;
CSS中的居中命令是非常重要的,因为它可以帮助我们实现网页元素的居中显示。下面我们来介绍几种常用的居中命令。
居中文字:text-align:center; 居中块级元素:margin:0 auto; 居中绝对定位元素:left:50%; top:50%; transform:translate(-50%, -50%);
首先介绍的是text-align:center命令。这个命令可以将文字在其父元素中水平居中显示,我们需要在父元素中加入如下代码:
父元素{ text-align:center; }
其次是margin:0 auto命令,这个命令可以实现块级元素的水平居中。我们需要将块级元素的宽度设为一个固定宽度,然后将左右margin都设置为auto(自动),如下代码:
子元素{ width: 200px; margin: 0 auto; }
最后介绍的是绝对定位元素的居中命令。这个命令需要将绝对定位的元素的left和top都设置为50%,然后使用transform的translate命令将元素向左和向上平移元素自身宽度和高度的一半,这样就可以将元素完全居中了,代码如下:
子元素{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
以上就是CSS中常用的居中命令,大家可以根据自己的需要进行选择应用。
粉丝
0
关注
0
收藏
0