HTML css——居中总结

最新推荐文章于 2023-03-13 08:20:45 发布

33的史努比

最新推荐文章于 2023-03-13 08:20:45 发布

阅读量85

点赞数

分类专栏：前端入门学习文章标签： css html css3

本文链接：https://blog.csdn.net/coising/article/details/122705623

版权

本文总结了CSS中各种类型的居中方法，包括行盒（行块盒）的文本居中，常规流块盒的水平居中，绝对定位元素的水平和垂直居中，以及单行文本和多行文本的垂直居中策略。通过这些方法，可以实现不同场景下的元素精确居中布局。

摘要由CSDN通过智能技术生成

居中总结

居中：盒子在其包含快中居中

行盒（行块盒）居中

直接设置行盒（块）父元素 text-align:center

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

        .inline-block{
     
            display: inline-block;
            width: 300px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="">超链接</a>
    </div>

    <div>
        <span class="inline-block"</