CSS元素居中的几种方法

Posted 2021-04-09 阿飞学习笔记

css是网页界面编码的语言，操作自由灵活，以后还是个方向，喜欢的同学可以学习学习。

1、水平居中

例如： 

关键点在 子元素的margin设置,父元素text-align:center

代码如下：

<div style="text-align:center;"> <span stlye="margin:auto"> 2相关课程 </span></div>

2、垂直居中

垂直居中主要是设置行高

方法一、

<div style="text-align:center;height:50px;"> <span stlye="margin:auto;line-height:50px;"> 2相关课程 </span></div>

方法二、

<div style="text-align:center;height:50px;">  <span style="position: relative;top:50%;  transform:translateY(-50%);"  >   2相关课程   </span></div>

‍方法三、使用flex

<div style="display: flex;align-items: center;justify-content: center;height:500px;background-color: #1d7db1"> <span style="background-color: #722ed1;color: white;font-size: 30px;"> 水平居中，垂直居中 </span></div>

‍

以上css控制元素居中的操作，在写界面和代码的时候，经常用到。注意以后多使用css3的标准，比较简单。