CSS居中

最新推荐文章于 2023-12-09 14:54:44 发布

我就不开心灬

最新推荐文章于 2023-12-09 14:54:44 发布

阅读量90

点赞数

分类专栏： CSS居中文章标签：定位 css html

本文链接：https://blog.csdn.net/weixin_47352853/article/details/113835342

版权

CSS居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

前言
CSS居中
总结

前言

在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。

提示：以下是本篇文章正文内容，下面案例可供参考

CSS居中

1.水平居中

1.1.行内元素水平居中

利用text-align: center可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline)，行内块(inline-block)，行内表(inline-table)，inline-flex元素水平居中都有效。

代码如下（示例）：

<html>
<style type="text/css">
		div {
    height:60px;
    border: 2px dashed #f69c55;
            }
       .center-text {
    text-align: center;
            }
</style>
<body>
<div class="center-text">
    简单是稳定的前提。
</div>
</body>
</html>

1.2.块级元素水平居中

通过把固定宽度的块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

代码如下（示例）：

<html>
<style type="text/css">
div {
    height: 100px;
    border: 2px dashed #f69c55;
}
.center-block {
    margin: 0 auto;
    width: 140px;
    padding: 10px;
    color:#fff;
    background:#000;
}
</style>
<body>
<div class="center-block">
    简单不先于复杂，而是在复杂之后。
</div>
</body>
</html>

在这里插入图片描述

2.垂直居中

2.1.单行行内元素垂直居中

通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

代码如下（示例）：

<html>
<style type="text/css">
.box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
}
</style>
<body>
<div class="box">
    软件在能够复用前必须先能用。
</div>
</body>
</html>

在这里插入图片描述

2.2.块级元素垂直居中

已知居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可实现垂直居中。

代码如下（示例）：

<html>
<style type="text/css">
.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    color:#fff;
    background: #000;
}

</style>
<body>
<div class="parent">
    <div class="child">控制复杂性是计算机编程的本质。</div>
</div>
</body>
</html>

在这里插入图片描述

3.水平垂直居中

3.1.固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。

代码如下（示例）：

<html>
<style type="text/css">
.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    width: 200px;
    height: 80px;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -110px;
    background: black;
    color: #fff;
}
</style>
<body>
<div class="parent">
    <div class="child">控制复杂性是计算机编程的本质。</div>
</div>
</body>
</html>

在这里插入图片描述

3.2.未知宽高元素水平垂直居中

利用2D变换，在水平和垂直方向都反向平移宽高的一半，从而使元素水平垂直居中。

代码如下（示例）：

<html>
<style type="text/css">
.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: black;
}
</style>
<body>
<div class="parent">
    <div class="child">当你试图解决一个你不理解的问题时，复杂化就产成了。当你试图解决一个你不理解的问题时，复杂化就产成了。</div>
</div>
</body>
</html>

在这里插入图片描述

总结

你学废了吗！

我就不开心灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS居中

文章目录前言CSS居中1.水平居中1.1.行内元素水平居中1.2.块级元素水平居中2.垂直居中2.1.单行行内元素垂直居中2.2.块级元素垂直居中3.水平垂直居中3.1.固定宽高元素水平垂直居中3.2.未知宽高元素水平垂直居中总结前言在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。提示：以下是本篇文章正文内容，下面案例可供参考CSS居中1.水平居中1.1.
复制链接

扫一扫