实现div水平垂直居中的7种方式

前端面试中，CSS相关的问题一般不会问的太多，但是有一个问题经常被选为面试题。那就是：div 水平垂直居中你有哪些办法？

这道题可以考察候选人对CSS布局方式的理解，而且非常贴近日常工作，比较适合作为面试题。今天我就帮大家梳理一下CSS实现div水平垂直居中的方法，建议收藏。

为了演示，首先创建两个嵌套的 div，然后设置一下大小和背景颜色这样比较容易看出效果。代码如下：

// html
<div class="outer outer-box">
  <div class="inner inner-box"></div>
</div>

// css
<style>
.outer {
  height: 100px;
  width: 100px;
  background-color: royalblue;
}
.inner {
  height: 50px;
  width: 50px;
  background-color: red;
}
<style>

设置完的效果就是这样，然后我们需要把内部的div 水平垂直居中。准备就绪，正式开始。我们分别使用 Flex 布局，Position布局， Grid布局三种方式。

flex布局

Flex 是Flexible Box的缩写，意为”弹性布局”。Flexible Box 模型是一种一维的布局模型，一次只能处理一个维度上的布局。flex布局有两根轴线，主轴和交叉轴。flex就是根据这两个轴线布局元素。

1.1 对外层div设置flex布局

在外层 div 上设置 justify-content: center; align-items: center; 属性， display 设置为 flex。即可实现水平垂直居中。

1.2 内外div分别设置

结果如下图：

Flex实现水平处置居中

Position布局

Position布局是传统的布局方式，position属性指定定位方式，利用CSS盒模型实现定位布局。

2.1 内部div使用 margin 属性居中

2.2 内部 div 使用 transform 属性居中

实现结果如下：

Grid布局

Grid（网格）布局被称为最强大的CSS布局方案，它可以将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

上面这种布局，Grid非常擅长。Flex布局属于一维布局，Grid布局可以将容器分为行和列，对单元格进行布局，属于二维布局。

3.1 外层div使用 place-content 属性

3.2 外层div使用Grid布局

3.3 内外div分别设置

实现结果如下：

总结

常见的问题也不见得简单，前端知识还是常学常新的。了解不同类型的CSS布局方式，对处理实际问题也很有帮助。

以上就是CSS实现div水平垂直居中的7种方式。如果你有别的方式，欢迎和大家一起分析。

如果觉得文章对您有帮助，欢迎收藏，转发~

端面试题中经常会出现这个问题，接下来，小郭就带你揭秘几种最常见的答案。

关注我！了解更多前端干货！

先设定一个html结构以及css的基本样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何让div实现水平居中</title>
</head>
<body>
    <div id="dad">
        <div id="son"></div>
    </div>
</body>
</html>

css样式

#dad{
    width: 400px;
    height: 200px;
    border: 3px solid green;
    margin: 30px auto;
}
#son{
    width: 100px;
    height: 100px;
    background: purple;
}

方法一：纯margin

/*css处添加下面代码*/
#son{
		margin:0 auto;
}

方法二：position定位

/*css处添加下面代码*/
#dad{
    position: relative;
}
#son{
    position: absolute;
		left:50%;
    margin-left:-50px;
}
/*注意：margin-left是负值，是#son这个div宽的一半*/ç

方法三：flexbox

/*css处添加下面代码*/
#dad{
    display: flex;
    justify-content: center;    
}
/*注意：弹性盒子的大部分属性都是写在父级上的*/

以上三种是最常见的，下期我们来讲讲其他奇形怪状的方法～

关注我，带你了解更多前端干货！

学前端，就选锐盈课堂！

自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取

Html5-CSS之五大居中方式

你是不是也对元素居中的知识点很是模糊？是不是苦于找不到一个总结的通俗易懂的说明？是不是自己懒得去总结？恭喜你，搜到这篇博客！这是鄙人在前端的学习与实践中总结出的元素的五大居中方式，黏贴了代码并对代码做了解释，希望对迷茫的有所帮助！

下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素

设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色

css居中方式1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
*{margin:0;}
div{width:200px;height:300px;border:2px solid #000;margin:200px auto;
text-align:center;font-size:0;
}
div p{width:100px;height:100px;background:#666;
display:inline-block;vertical-align:middle;
}
div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。

css居中方式2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了定位居中

子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。

css居中方式3

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
*{margin:0;}
div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

这里利用了弹性盒居中

父元素div设置成弹性盒样式，justify-content:center;主轴居中

align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）

css居中方式4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{width:100px;height:100px;background:#f99;position:absolute;
left:50%;top:50%;margin:-50px 0 0 -50px;}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。

css居中方式5

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
*{margin:0;}
div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}
p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;
	transform:translate(-50%,-50%);}
</style>
</head>
<body>
<div>
	<p></p>
</div>
</body>
</html>

利用动画移动属性transform

结语

相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！

原文链接：https://blog.csdn.net/qq_38110274/article/details/102756968

在线咨询

上一篇：如何在网页设计中用好圆形要素
下一篇：JavaScript 设置和控制下拉菜单

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

实现div水平垂直居中的7种方式

flex布局

Position布局

Grid布局

总结

您的项目需求