css实现不定宽水平居中的方法

　　介绍

这篇文章将为大家详细讲解有关css实现不定宽水平居中的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

方法:1,利用flex布的局,将ustify-content和对齐项目属性都设置为中心来实现居中;2,利用变换和位置属性来实现居中;3、使用表格单元,利用表的单元格居中效果。

<强> css实现不定宽水平居中

<强>方法1:利用flex

大家的第一反应,可能就是flex了。因为它的写法够简单直观,兼容性也没什么问题。是手机端居中方式的首选。

& lt; div 类=皐rapper  flex-center"比; 　　,,,& lt; p> horizontal 以及vertical

　　& lt;/div> .wrapper  { 　　,,,宽度:,300 px; 　　,,,身高:,300 px; 　　边境:,,,,1 px  solid  # ccc; 　　} 　　.flex-center  { 　　,,,显示:,flex; 　　,,,justify-content:,中心; 　　,,,对齐项目:,中心; 　　}

利用到了2个关键属性:justify-content和对齐项目,都设置为中心,即可实现居中。

需要注意的是,一定要把这里的flex-center挂在父级元素,才能使得其中唯一的子元素居中。

<强>方法2:利用变换+位置

这个组合,常用于图片的居中显示。

& lt; div 类=皐rapper"比; 　　,,,& lt; https://www.yisu.com/zixun/img  src=" test.png ">