水平居中

1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式

<div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"><span>行级元素</span>
</div>

2.块级元素：为其自身设置margin:auto样式

<div style="width: 500px;height: 100px;border: 1px solid red;"><div style="line-height: 100px;text-align: center;margin:auto;width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

垂直居中

方法一：

display:table;此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符.

display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

<div style="display: table;width: 500px;height: 200px;border: 1px solid red;"><div style="display: table-cell;vertical-align: middle;text-align:center;">块级元素</div>
</div>

方法二：

利用flex布局使内部块级元素水平，垂直居中（display:flex;justify-content: center; align-items:center;）

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;border: 1px solid green;text-align:center;line-height:100px "><div style="width: 100px;height: 100px;border: 1px solid gold">块级元素</div>
</div>

方法三：

利用定位实现，父元素：position:relative; ，子元素：position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"><div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>

方法四：

绝对定位， left：50%，top: 50% + margin-left:-(自身宽度的一半),margin-top:-(自身高度的一半)
缺点：要自己计算容器的宽高，万一容器的宽高改变还要修改css样式

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"><div style="position:absolute;top:50%;left:50%;margin-left: -50px;margin-top: -50px;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>

方法五：

绝对定位，left: 0，right: 0, top: 0, bottom: 0 + margin：auto

<div style="position:relative; width: 500px;height: 200px;border: 1px solid red;"><div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>

方法六：

固定定位position:fixed;并设置一个较大的z-index层叠属性值

<div style="position:fixed;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;z-index: 999;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素
</div>

方法七：

要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：

<div style="margin: 50vh auto 0;transform: translateY(-50%);line-height:100pxwidth: 100px;height: 100px;border: 1px solid gold;text-align:center;">块级元素
</div>

方法八：

Flex加margin:auto

<div style="display: flex;width: 500px;height: 200px;border: 1px solid red;"><div style="margin: auto;width: 100px;height: 100px;border: 1px solid gold;text-align:center;line-height:100px">块级元素</div>
</div>

div居中方法（共8种）相关推荐

div居中方法（共9种）
div居中方法(共9种) 水平居中行级元素:为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px ...
使一个div居中显示的三种方法
使一个div居中显示的三种方法 1. <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html这一段div居中显示,使一个div居中显示的三种方法
使一个我自址哈这工边识框处己按后大都加控不架的div居中显示比抖朋要插支一圈不者地器享说几的三种方法 1. div居中 /*第一种方法*/ div{ width: 200px; height: 200 ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...
CSS样式——div居中方法
1.绝对居中给div设置样式,div默认显示位置为body的左上方. width: 400px;height: 300px;background-color: orange; 如下图所示: 首先给d ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
实现DIV居中布局三种途径(转)
DIV+CSS布局有很多值得学习的地方,这里和大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识. ...
百度网盘百度云视频倍速播放方法亲测有用共6种，总有一个适合你
百度网盘百度云视频倍速播放方法共6种,总有一个适合你电脑方法1: 火狐浏览器,登录百度网盘,播放视频,右键,倍速方法2: microsoft edge 浏览器方法同上方法3: 谷歌浏览器 ...
css居中的几种办法,CSS div居中的几种方法
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框. 方法一:对div使用绝对布局position:absolute;并设置to ...

div居中方法（共8种）