css如何实现ul中li内容垂直居中和水平居中-创新互联

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

1、li内容垂直居中

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

HTML部分：

    

	 
aa
	 
bb
	 
cc
	 
dd
    

CSS部分：

效果图：

2、li内容水平居中

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

HTML部分：

	

	   
今天心情不错
	   
今天心情不错
	   
今天心情不错
	   
今天心情不错
	 

CSS部分：

效果图：

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