1200字范文 > CSS居中——水平居中垂直居中方法

CSS居中——水平居中垂直居中方法

时间：2021-05-28 01:31:42

相关推荐

CSS居中——水平居中垂直居中方法

水平居中

1、行内或类行内元素（如文本、链接）

在块级父元素中用CSS样式实现行内元素水平居中，只需要设置：text-align: center;

这种方法可以让 inline / inline-block / inline-table / flex 等类型的元素实现居中。

效果图：

代码：

<style>body{background-color: coral;}#div1,#div2{width: 400px;height: 100px;text-align: center;margin: 20px 0;padding: 20px;background-color: white;}#div2 a{text-decoration: none;color: white;padding: 3px 8px;border-radius: 5px;background-color: cornflowerblue;}</style><body><div id="div1">这是一段简单的文字，水平居中</div><div id="div2"><a href="#">hyperlink1</a><a href="#">hyperlink2</a><a href="#">hyperlink3</a><a href="#">hyperlink4</a></div></body>

2、子盒子已知宽度

效果图

html代码

<body><div class="div1"><div class="div2"></div></div></body>

实现方法

①margin: 0 auto;

<style>body{background-color: lightgoldenrodyellow;}.div1{background-color: cyan;}.div2{width: 200px;height: 100px;margin: 0 auto;background-color: rgb(132, 247, 65);color: white;}</style>

② position定位＋margin-left

<style>body{background-color: lightgoldenrodyellow;}.div1{position: relative;}.div2{width: 200px;height: 100px;position: absolute;left: 50%;/* margin-left: 负的一半宽度width */margin-left: -100px;background-color: rgb(132, 247, 65);color: white;}</style>

3、子盒子有无宽度均适用

效果图

html代码

<body><div class="div1"><div class="div2">居中</div></div></body>

实现方法

① position定位+ transform

<style>body{background-color: rgb(238, 197, 203);}.div1{position: relative;}.div2{position: absolute;left: 50%;/* 使用transform在X轴方向移-50%，无需根据宽度计算 */transform: translateX(-50%);background-color: rgb(145, 212, 235);font-size: 40px;}</style>

②flex布局

<style>body{background-color: rgb(238, 197, 203);}.div1{display: flex;justify-content: center;}.div2{background-color: rgb(145, 212, 235);font-size: 40px;}</style>

垂直居中

1、行内元素

设置line-height与父级元素的height相等

效果图：

代码：

<style>.div1{height: 400px;background-color: aquamarine;}.div2{width: 200px;height: 200px;line-height: 400px; /*设置line-height与父级元素的height相等*/font-size: 30px;}</style><body><div class="div1"><div class="div2">垂直居中</div></div></body>

2、子盒子已知高度

效果图

html代码

<body><div class="div1"><div class="div2">垂直居中</div></div></body>

实现方法

① position定位+ margin-top

<style>.div1{height: 400px;background-color: aquamarine;position: relative;}.div2{width: 250px;height: 200px;background-color: coral;position: absolute;top: 50%;/* margin-top: 负的一半高度height */margin-top: -100px;line-height: 200px;}</style>

3、子盒子有无高度均适用

效果图

html代码

<body><div class="div1"><div class="div2">垂直居中</div></div></body>

实现方法

①父盒子CSS样式设置伪类元素

基本思路：使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。

<style>.div1 {height: 400px;background-color: rgb(177, 236, 247);}.div1::after{content:'';height:100%;display:inline-block;vertical-align:middle;}.div2{width: 250px;background-color: rgb(219, 166, 166);display:inline-block;vertical-align:middle;line-height: 200px;}</style>

② position + transform

<style>.div1{height: 400px;background-color: rgb(177, 236, 247);position: relative;}.div2{width: 250px;background-color: rgb(219, 166, 166);position: absolute;top: 50%;transform: translateY(-50%);line-height: 200px;}</style>

③flex布局

<style>.div1{height: 400px;background-color: rgb(177, 236, 247);display: flex;align-items: center;}.div2{width: 250px;background-color: rgb(219, 166, 166);line-height: 200px;}</style><body><div class="div1"><div class="div2">垂直居中</div></div></body>