CSS水平居中设置总结

最新推荐文章于 2024-09-14 09:47:44 发布

JiajiaAz

最新推荐文章于 2024-09-14 09:47:44 发布

阅读量260

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_32657025/article/details/74079841

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

水平居中

情形一

目标元素为块状元素，默认情况下其宽度父元素的100%，不存在水平居中一说。

情形二

目标元素为块状元素，且宽度固定，可以通过设置margin:auto实现其相对于父元素的水平居中。

情形三

目标元素可以设置为内联元素或内联块状元素，然后设置父元素text-align:center即可实现目标元素居中。

情形四

目标元素为块状元素，宽度不固定，且我们希望元素的宽度正好包裹其内容，并实现其水平居中：

设置目标元素的position:absolute，实现元素的宽度正好包裹其内容；
确保父元素具有position属性，设置目标元素left:50%，实现目标元素向右偏移父元素的一般；
设置transform: translate(-50%,0)，实现元素向右偏移自身的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    div {
        background-color: red;
    }
    ul{
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
    }
</style>
<body>
    <div id="div">
        <ul>
            <li>sdfsdfs</li>
            <li>sdfsdfdfgdfs</li>
        </ul>
    </div>
</body>
</html>