css 水平居中

浅浅的花香味﹌ 2023-06-16 08:07 5阅读 0赞

## 1.水平居中的margin:0 auto，这个是用于块级元素上。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20191125150315683.png]

## 2.水平居中 text-align:center，行内元素可以在父元素上添加效果让它进行水平居中，子元素都会居中。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 2]

## 4.水平垂直居中（二）定位和margin：auto； 这个方法也很实用，不用受到宽高的限制，很好用。 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191125150303113.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3,size_16,color_FFFFFF,t_70
[20191125150315683.png]: https://img-blog.csdnimg.cn/20191125150315683.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191125150415462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191125150905984.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191125151106461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxODkyNjI4MjE3,size_16,color_FFFFFF,t_70