ul 中 li 内容垂直居中和水平居中的方法

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

依旧平凡

20781人浏览 · 2019-08-09 11:10:37

依旧平凡 · 2019-08-09 11:10:37 发布

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>

效果图：

li居中3.jpg

2、li内容水平居中

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

HTML部分：

<div class="box">

<ul>

<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>

效果图：

li内容1.jpg

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport