css水平居中

1、元素水平居中

margin：0 auto；

為居中的原因

①元素沒有設置寬度，沒有寬度無法居中

②設置寬度依然不好使，可能設置的行內元素。

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="css html">
    <meta name="description" content="css html study">
    <style>
.wrapper{
    width: 200px;
    height: 200px;
    background-color: red;
    margin: 0 auto;
}
.content{
    width: 80px;
    height: 80px;
    background-color: green;
    margin: 0 auto;
     /*文字居中*/
    text-align: center;
    /*文字在塊內垂直居中*/
    line-height: 80px; 

}
</style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
居中
    </div>
    </div>
    
</body>
</html>

2、元素水平垂直居中

方案1、position元素已知寬度

父元素設置為position：relative

子元素設置為position：absolute

距離上50% 據左50% 然后減去元素自身的寬度的距離就可以實現

小貼士：

margin標記可以帶一個、二個、三個、四個參數，各有不同的含義。

margin: 20px;（上、下、左、右各20px。）

margin: 20px 40px;（上、下20px；左、右40px。）

margin: 20px 40px 60px;（上20px；左、右40px；下60px。）

margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="css html">
    <meta name="description" content="css html study">
    <style>

.wrapper1{
    background-color: red;
    width: 200px;
    height: 200px;
    position: relative;
}
.content1{
position: absolute;
background-color: blue;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
margin: -40px  0 0 -40px;
}
</style>
</head>
<body><div class="wrapper1">
        <div class="content1 "></div>
    </div>
    
</body>
</html>

方案2：position tran's'f'orm元素未知寬度

將margin改為transform

transform：translate（-50%，-50%）

示例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="css html">
    <meta name="description" content="css html study">
    <style>
.wrapper2{
    background-color: red;
    width: 200px;
    height: 200px;
    position: relative;
}
.content2{
position: absolute;
background-color: blue;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
 transform: translate(-50%,-50%);
}
</style>
</head>
<body>
          <div class="wrapper2">
        <div class="content2 "></div>
    </div>
    
</body>
</html>

方案3：flexe（布局）

示例4：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="css html">
    <meta name="description" content="css html study">
    <style>
.wrapper3{
    background-color: red;
    width: 200px;
    height: 200px;
    /*flex布局*/
    display: flex;
    /*使子項目水平居中*/
    justify-content: center;
    /*使子項目垂直居中*/
    align-items: center;
}
.content3{
background-color: blue;
width: 80px;
height: 80px;
</style>
</head>
<body>

    <div class="wrapper3">
        <div class="content3 "></div>
    </div>
    
    
</body>
</html>

方案4：table-cell布局

示例5：

因為table-cell相當于表格的td，td為行內元素，無法設置寬和高，所以嵌套一層，嵌套一層必須設置display：inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="css html">
    <meta name="description" content="css html study">
    <style>
.wrapper4{
    background-color: black;
    width: 200px;
    height: 200px;
    display: table;
}
.content4{
background-color: gray;
display: table-cell;
/*使子元素垂直居中*/
vertical-align: middle;
/*使子元素水平居中*/
text-align: center;
}
.inner{
    background-color: green;
    display: inline-block;
    width: 20%;
    height: 20%;
}

</style>
</head>
<body>

    <div class="wrapper4">
        <div class="content4">
            <div class="inner"></div>
        </div>
    </div>
    
</body>
</html>

posted @ 2020-09-07 01:01 recommencer 閱讀(187) 評論(0) 收藏舉報

刷新頁面返回頂部

recommencer

微信:LL_2018 一起學習進步

css水平居中

公告