不定寬度下，元素的垂直居中，水平居中

小驢子發表於2018-09-07

1.父元素設定 text-aligncenter, 子元素設定：display:inline-block; line-height:寬度

（例子僅做參考，精華以言明） 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/mui/3.4.0/css/mui.min.css" rel="stylesheet">
    <title>居中</title>
    <style>
        .pagination {
            margin-top: 20px;
            font-size: 0;
            text-align: center;
        }

        .pagination li {
            line-height: 25px;
            display: inline-block;
            *display: inline;
            font-size: 14px;

            margin: 0 5px;
        }

        .pagination a {
            display: block;
            color: #999;
            text-shadow: 1px 0 0 #101011;
            padding: 0 10px;
            border-radius: 2px;
            box-shadow: 0 1px 0 #5a5b5c inset, 0 1px 0 #080808;
            background: linear-gradient(top, #434345, #2f3032);
        }

        .pagination a:hover {
            text-decoration: none;
            background: #f9bd71;
            box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
            background: linear-gradient(top, #f48b03, #c87100);
        }
    </style>
</head>

<body>
    <div class="pagination">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
        </ul>
    </div>
</body>

</html>
複製程式碼

2.對於要浮動的元素 或者 position：absolute 絕對定位的元素 可直接在父元素上設定樣式 float:left;left:50%;transform：translateX（-50%） 

 .pagination {
           overflow: hidden;
           border:1px solid #34f65f;
        }
        .pagination ul{
            float:left;
            position: relative;
            left:50%;
            list-style:none;
            transform:translateX(-50%)
        }
        .pagination li {
            float: left;
            line-height: 25px;
            font-size: 14px;
            position: relative;
            margin: 0 5px;
        }
複製程式碼

3.對於要浮動的元素 或者 絕對定位的元素 可在父元素上設定樣式 position：absolute left:50%;子元素設定：margin-left:-50% 

 .pagination {
          position: absolute;
          left:50%;
           border:1px solid #34f65f;
        }
        .pagination ul{
            position: relative;
            list-style:none;
            margin-left:-50%;
        }
        .pagination li {
            float: left;
            line-height: 25px;
            font-size: 14px;
            position: relative;
            margin: 0 5px;
        }
複製程式碼

4.flex 佈局 在父元素上定義 dispaly:flex 

 .pagination ul{
          display:flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          list-style:none;
        }
複製程式碼

5.fit-content 在父元素上定義 fit-content

.pagination ul{
          margin:0 auto;
          width:-webkit-fit-content;
          width:fit-content;
          list-style: none;
          margin-top:30px;
        }
複製程式碼

6.實現元素的垂直居中 在父元素上定義display:table;子元素：dispaly:table-cell;vertical-align:middle 

.pagination {
            display:table;
        }
        .pagination .main {
            display: table-cell;
            vertical-align:middle;
            font-size: 14px;
            position: relative;
            margin: 0 5px;
        }
複製程式碼

相關文章