CSS居中总结

最新推荐文章于 2025-07-19 14:55:36 发布

原创最新推荐文章于 2025-07-19 14:55:36 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

html&CSS 专栏收录该内容

8 篇文章

订阅专栏

水平居中

1.行盒，行块盒居中

设置父元素text-align: center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
       div{
           margin : 30px;
           background: lightblue;
           height : 100px;
           text-align : center;
       }

</style>
<body>
    <div>
        <a href="">.......................</a>
    </div>
 
</body>
</html>

2.常规流块盒

定宽 width：1000px;

margin-left,margin-right:设置为auto

3.绝对定位元素水平居中

定宽 width：1000px;

left : 0; right : 0;

margin-left,margin-right:设置为auto

垂直居中

1.单行文本的垂直居中

line-height: 包含块的高度