div水平垂直居中的方法

最新推荐文章于 2022-03-02 14:40:18 发布

小静仔

最新推荐文章于 2022-03-02 14:40:18 发布

阅读量217

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/shelbyandfxj/article/details/79797042

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

有如下一个div及其样式：

<style type="text/css">     
        div {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
    </style>  
    <div id="outer">
    </div>

让其居中的方法有：

（1）

 #outer {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);//定义 2D 转换，沿着 X 和 Y 轴移动元素。
 }

（2）

#outer {    
     position: absolute;  
     top: 50%;  
     left: 50%;  
     margin-left: -100px;   //这是元素的宽度的一半  
     margin-top: -100px;  
}

（3）

#outer {  
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     margin: auto
}

（4）这里是以父子元素来将div居中，将div的父元素定义为flex格局。（同样，当该子元素的宽高不定时也可以使用这种方法来使其垂直居中）

 body {
      display:flex;
      justify-content:center;   //定义了主轴方向的对齐方式，这里是居中
      align-items:center;       //定义了交叉轴方向的对齐方式
 }

（5）这种也是以父子元素的方式来定义垂直水平居中的，而且，这里父子元素的宽高要一致。

<style type="text/css">     
        div {
            border: 1px solid red;
            width: 200px;
            height: 200px;
        }
        #inner {
            margin-left: -50%;
            margin-top: -50%;
        }
        #outer {  
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>   

<div id="outer">
    <div id="inner"></div>
</div>

补充两种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现水平垂直居中</title>
    <style>
        .wp {
            line-height: 300px;
            text-align: center;
            font-size: 0px;
        }
        .box {
            font-size: 16px;
            display: inline-block;
            vertical-align: middle;
            line-height: initial;
            text-align: left; /* 修正文字 */
        }
    </style>
</head>
<body>
<div class="wp">
    <div class="box">
        <div style="border: 1px solid red; width: 100px; height: 100px;"></div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现水平垂直居中</title>
    <style>
        .wp {
            writing-mode: vertical-lr;
            text-align: center;
        }
        .wp-inner {
            writing-mode: horizontal-tb;
            display: inline-block;
            text-align: center;
            width: 100%;
        }
        .box {
            display: inline-block;
            margin: auto;
            text-align: left;
        }
    </style>
</head>
<body>
<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
</body>
</html>

小静仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div水平垂直居中的方法

有如下一个div及其样式：&lt;style type="text/css"&gt; div { border: 1px solid red; width: 200px; height: 200px; } &lt;/style&gt; &lt;div id="...
复制链接

扫一扫

专栏目录