HTML+CSS之设置元素的水平垂直居中

本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中。

1.弹性布局（不换行）

justify-content:center：水平居中

align-items:center：垂直居中

  .father {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: nowrap;justify-content: center;align-items: center;margin-bottom: 50px;}

2.弹性布局（换行）

justify-content:水平居中

align-content:center:垂直居中

 .father1 {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: wrap;justify-content: center;align-content: center;margin-bottom: 50px;}

3.定位（2D变化）

利用定位的top及left初步进行居中定位，发现会多偏移宽高的二分子一，通过translate向左和向上移动元素自身宽高的一半，即可实现垂直居中效果。

 .son2 {position: absolute;background-color: skyblue;top: 50%;left: 50%;transform: translate(-50%, -50%);}

4.定位（过度约束）

利用网页布局的过度约束原则（之前博客有过介绍）

.son3 {position: absolute;width: 100px;height: 100px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}

5.单元格布局（table-cell）

text-align:center:水平居中

vertical-align:middle:垂直居中

 .father4 {display: table-cell;width: 500px;height: 500px;background-color: pink;text-align: center;vertical-align: middle;}.son4 {display: inline-block;}

总体代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实现水平垂直居中(子元素宽高无论有无与否,第四种子元素需要有宽高)</title><style>/* 方式一 */.father {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: nowrap;justify-content: center;align-items: center;margin-bottom: 50px;}.son {background-color: skyblue;}/* 方式二 */.father1 {display: flex;width: 500px;height: 500px;background-color: pink;flex-wrap: wrap;justify-content: center;align-content: center;margin-bottom: 50px;}.son1 {background-color: skyblue;}/* 方式三 */.father2 {position: relative;width: 500px;height: 500px;background-color: pink;margin-bottom: 100px;}.son2 {position: absolute;background-color: skyblue;top: 50%;left: 50%;transform: translate(-50%, -50%);}/* 方式四 */.father3 {position: relative;width: 500px;height: 500px;background-color: pink;margin-bottom: 200px;}.son3 {position: absolute;width: 100px;height: 100px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}/* 方式五 */.father4 {display: table-cell;width: 500px;height: 500px;background-color: pink;text-align: center;vertical-align: middle;}.son4 {display: inline-block;}</style>
</head><body><div class="father"><div class="son">123</div><div class="son">456</div><div class="son">789</div></div><div class="father1"><div class="son1">人大由承心都，实就。</div></div><div class="father2"><div class="son2">范易头。dwdww</div></div><div class="father3"><div class="son3">啊承个嗣朋，承者想同服国，帅志。</div></div><div class="father4"><div class="son4">你治皇看久车书愚，智与都毒考自，高办才安，恶。</div></div>
</body></html>

6.利用行内块及vertical-align属性

核心思路：子元素须设置为行内块模式，通过给父级添加text-align:center实现子元素的水平居中。

垂直居中需要设置一个宽度为0，高度与父级等高的盒子，需要转为行内块模式，同时设置vertical-align:middle.最后给子元素设置vertical-align:middle即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>header {width: 500px;margin: 0 auto;height: 300px;background-color: #1d6add;text-align: center;}div {width: 0;height: 300px;display: inline-block;vertical-align: middle;}img {vertical-align: middle;}</style>
</head><body><header><div></div><img src="./imgs/1.png" alt="" width="300px"></header>
</body></html>

效果如图：

HTML+CSS之设置元素的水平垂直居中相关推荐

CSS文字或元素的水平垂直居中多种方式（简单明了）
前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...
CSS实现子元素div水平垂直居中
div基本布局 <div class="main"><div class="center"></div>
未知宽高元素的水平垂直居中
大致有4种方法实现: 一.table布局(display:table) 二.绝对布局(position:absolute)+translate 三.转化 ...
html给主题设置背景色,css如何设置元素的背景色？
css如何设置元素的背景色?下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用background-color属性来设置元素的背景色 ...
android设置webview光标颜色,CSS自定义设置元素闪烁光标颜色
这次给大家带来CSS自定义设置元素闪烁光标颜色,CSS自定义设置元素闪烁光标颜色的注意事项有哪些,下面就是实战案例,一起来看一下. 前言因为业务需求, 要求我们的input框内的文本与悬浮的光标颜色不 ...
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
CSS设置元素水平居中、垂直居中方式汇总
按照水平居中.垂直居中.行内元素.块级元素等条件进行组合获取效果水平居中:行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: . ...
margin:auto实现绝对定位元素的水平垂直居中
1.绝对定位元素的居中实现的一般方法兼容性不错的主流用法是: 但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸.否则margin负值的调整无法精确.此时,往往要借助JS获得. CSS3的兴 ...