在div+css布局中，水平、垂直局中是很常用的，但对于像我这样的小白来说，经常会出现有些css设置不起作用，后来就网上搜索一些资料研究了一番，现在总结如下，以后好翻看。
对于行内元素、块状元素，定宽的元素、不定宽的元素，水平、垂直局中的设置都是不一样的。

水平局中

1、行内元素：

当子元素为行内元素，对父元素设置text-align:center;

2、定宽块状元素

当子元素为定宽块状元素，设置左右margin值为auto，如：margin:0 atuo;

3、不定宽块状元素

我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式：

加入 table 标签
设置 display;inline 方法
设置 position:relative 和 left:50%;

（1）加入 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。
第二步：为这个 table 设置“左右 margin:auto”（这个和定宽块状元素的方法一样）。
HTML结构：

<div><table><tbody><tr><td><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></td></tr></tbody></table>
</div>

css样式

<style>table{margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}
</style>

缺点：是增加了无语义的HTML标签，增加了嵌套深度

（2）设置 display：inline 方法

改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。
HTML结构：

<body><div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></div>
</body>

css样式

<style>.container{text-align:center;}.container ul{list-style:none;margin:0;padding:0;display:inline;}.container li{margin-right:8px;display:inline;}
</style>

缺点：将块级元素的display设置为inline，于是少了很多功能，比如盒子模型

（3）设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
HTML结构：

<body><div class="container"><ul><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul></div>
</body>

css样式

<style>.container{float:left;position:relative;left:50%}.container ul{list-style:none;margin:0;padding:0;position:relative;left:-50%;}.container li{float:left;display:inline;margin-right:8px;}
</style>

这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度。
缺点：设置了 position:relative，带来了一定的副作用。

4、通用方案

flex布局，对父元素设置display:flex;justify-content:center;

这四种方法各有利弊，根据实际情况选用。

垂直居中

1、父元素高度确定的单行文本

设置父元素的height等于行高line-height。注意：如果多行内联文本这样设置就会被切割成几部分，很难看，如下：

2、父元素高度确定的多行文本

3、父元素高度不确定的多行文本

以上有三种情况详解请看：https://segmentfault.com/a/1190000003111071

4、通用方案

flex布局，给父元素设置{display:flex; align-items:center;}。

CSS实现水平局中、垂直局中详解相关推荐

CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
Python 在子类中调用父类方法详解（单继承、多层继承、多重继承）
Python 在子类中调用父类方法详解(单继承.多层继承.多重继承) by:授客 QQ:1033553122 测试环境: win7 64位 Python版本:Python 3.3.5 代码实践 ...
计算机硬件图标准画法,机械制图培训中剖视图的画法详解
机械制图培训中剖视图的画法详解机械制图是机械工程语言,用图样表示机械产品的结构形状.尺寸大小.工作原理和技术要求,是机械设计与机械制造的基础学科,每一个从事机械行业的人员都应该懂机械制图. 机械CA ...
viewstate 解码 php,.NET_asp.net中ViewState的用法详解，在web窗体控件设置为runat = serv - phpStudy...
asp.net中ViewState的用法详解在web窗体控件设置为runat = "server",这个控件会被附加一个隐藏的属性_ViewState,_ViewState存放了 ...
dapper mysql 预处理_.Net Core中Dapper的使用详解
Dapper 是一个轻量级ORM框架,在项目中如果对性能比较看中,Dapper是一个不错的选择.接下来我们就来看看如何在项目中使用Dapper. 1.安装Dapper 这里直接使用Nuget安装. 安 ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
VMware虚拟机文件夹中各文件作用详解
VMware虚拟机文件夹中各文件作用详解虚拟机的文件管理由VMware Workstation来执行. 一个虚拟机一般以一系列文件的形式储存在宿主机中, 这些文件一般在由workstation为虚拟 ...

CSS实现水平局中、垂直局中详解

水平局中

1、行内元素：

2、定宽块状元素

3、不定宽块状元素

（1）加入 table 标签

（2）设置 display：inline 方法

（3）设置 position:relative 和 left:50%;

4、通用方案

垂直居中

1、父元素高度确定的单行文本

2、父元素高度确定的多行文本

3、父元素高度不确定的多行文本

4、通用方案

CSS实现水平局中、垂直局中详解相关推荐

最新文章

热门文章