【技能】css水平垂直方法

最新推荐文章于 2022-12-19 10:56:19 发布

专砖儿

最新推荐文章于 2022-12-19 10:56:19 发布

阅读量156

点赞数

分类专栏：技能文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_40921421/article/details/122351276

版权

技能专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1）flex+align-item+justify-content

父元素（宽和高的值可以是具体的值，也可以是百分数）中添加样式flex+align-item+justify-content，仅保证子元素中所有内容横向分布。

display:flex;

align-items: center; /* 垂直分布 */

justify-content: center;  /* 水平分布 */

2）table-cell+verical-align+text-align

父元素（宽和高的值可以是具体的值，也可以是百分数）中添加样式table-cell+verical-align+text-align，可实现子元素中所有内容的自动换行分布。对浮动元素无用。

display:table-cell;

vertical-align: middle; /* 垂直分布 */

text-align:center; /* 水平分布 */

3）table+table-cell

父元素（宽和高的值可以是具体的值，也可以是百分数）中添加样式table+子元素（display:table-cell;），可实现子元素中所有内容的自动换行分布。

父元素的样式：

display:table;

width:500px;

height:100px;

子元素的样式：

display:table-cell;

vertical-align: middle;

4）table-cell+vertical-align+text-align+inline-block+clear+float

父元素1（宽和高的值可以是具体的值，也可以是百分数）中添加样式table-cell+父元素2（clear:both;）+子元素（float:left;），可实现子元素中所有内容的自动换行分布。对浮动元素无用。

父元素1的样式：

display:table-cell;

vertical-align: middle; /* 垂直分布 */

text-align:center; /* 水平分布 */

父元素2的样式：

width:400px;

height:100px;  

display:inline-block;  /* ① 如果父元素2是block元素，且设置了其width和height，则inline-block必须存在。否则table-cell的水平居中无效 ② 也可以将width、height、inline-block均删除。*/

clear:both; /* 效果不是很大，有没有都不影响子对象的垂直水平居中*/

子元素的样式：