css如何实现ul中li内容垂直居中和水平居中

这篇文章主要介绍了css如何实现ul中li内容垂直居中和水平居中，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

1、li内容垂直居中

flex-direction 属性规定灵活项目的方向。当设置它的属性值为column时，表示灵活的项目将垂直显示，正如一个列一样。justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的垂直居中。代码如下：

HTML部分：

<div class="box"> <ul> <li>aa</li> <li>bb</li> <li>cc</li> <li>dd</li> </ul> </div>

CSS部分：

<style type="text/css">	.box{ width: 300px; height: 300px; border: 1px solid red; }	.box ul{ height: 300px; display: flex; flex-direction: column; justify-content: center; } .box ul li{ list-style: none; margin: 0 auto; } </style>

效果图：

2、li内容水平居中

flex-direction 属性规定灵活项目的方向。当设置它的属性值为row时（默认值），表示灵活的项目将水平显示，正如一个行一样。 justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，当设置其属性值为center时，表示项目位于容器的中心。这样就可以实现ul中li内容的水平居中。代码如下：

HTML部分：

<div class="box">	<ul> <li>今天心情不错</li> <li>今天心情不错</li> <li>今天心情不错</li> <li>今天心情不错</li> </ul> </div>

CSS部分：

<style type="text/css">	.box{	width: 100%;	height: 200px;	border: 1px solid #000;	} .box ul{ height: 200px; display: flex; flex-direction: row; justify-content: center; } .box ul li{ list-style: none; height: 200px; line-height: 200px; } </style>

效果图：

感谢你能够认真阅读完这篇文章，希望小编分享css如何实现ul中li内容垂直居中和水平居中内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!