CSS布局（水平&垂直居中）

作者: 小如99 | 来源:发表于2018-02-27 16:12 被阅读10次

页面布局居中问题
CSS水平居中布局、垂直居中布局、垂直水平居中布局
CSS图片居中(水平居中和垂直居中)
CSS布局（水平&垂直居中）
居中布局
无标题文章
CSS常用布局实现
CSS布局
CSS 常见问题总结（1）
CSS布局与定位入门

所有的标签水平居中:
行内标签 和 行内块级标签: 在父标签中设置  text-align: center;
块级标签 : 在自身设置 margin: 0 auto (还有width/height/line-height都要设置);

所有的标签垂直居中:
行内标签 和 行内块级标签 : 在父标签中设置 line-height == 内容高度
块级标签 :  position: absolute;（父标签要设置position: relative）
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);

块级标签

独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）

行内标签（内联标签）

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）

行内-块级标签（内联-块级标签）

多个行内-块级标签可以显示在同一行

能随时设置宽度和高度（比如input、button）

附上代码

<head>
<meta charset="UTF-8">
<title>水平&垂直居中</title>
<!--
所有的标签水平居中:
行内标签 和 行内块级标签: 在父标签中设置  text-align: center;
块级标签 : 在自身设置 margin: 0 auto;

所有的标签垂直居中:
行内标签 和 行内块级标签 : 在福标签中设置 line-height == 内容高度
块级标签 :  position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
-->
<style>
    *{
        margin: 0;
        padding: 1;
    }
    #main{
        width: 500px;
        height: 200px;
        background-color: red;

        /*让内容居中*/
        text-align: center;

        /*垂直居中*/
        line-height: 200px;

        position: relative;
    }
    span{
        background-color: green;
    }
    .test{
        width: 200px;
        height: 100px;
        line-height: 100px;
        background-color: aqua;
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        margin: 0 auto;

        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

</style>
</head>
<body>
<div id="main">
    <!--行内标签-->
    <span>行内标签</span>
    <!--行内块级-->
    <button>行内块级标签</button>
    <!--块级标签-->
    <div class="test">块级标签</div>

    <p></p>
    <input>

</div>
</body>
</html>