css水平、垂直居中的写法

简介: css水平、垂直居中的写法

第一种利用flex布局实现

.div1 {
   
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .div1 div {
   
            width: 100px;
            height: 100px;
            background-color: red;
        }

第二种用定位和转换实现

.div2 {
   
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            position: relative;
        }

        .div2 div {
   
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

第三种用表格布局实现

.div3 {
   
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .div3 div {
   
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }

第四种用定位和外边距auto实现

.div4 {
   
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            position: relative;
        }

        .div4 div {
   
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
目录
相关文章
|
6月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
4月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
230 3
|
4月前
|
前端开发
css实用技巧——绝对定位元素的水平垂直居中
css实用技巧——绝对定位元素的水平垂直居中
49 2
|
4月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
98 2
|
4月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2271 1
|
4月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
70 0
|
4月前
|
前端开发 C++ 容器
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
CSS【详解】居中对齐 (水平居中 vs 垂直居中)
45 0
|
6月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
115 1
|
6月前
|
前端开发 容器
CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
【4月更文挑战第2天】 CSS面试考点:隐藏元素、BFC、垂直居中、CSS3新特性
53 10
|
前端开发
DIV+CSS文字与图片上下垂直居中-div css居中
DIV+CSS文字与图片上下垂直居中-div css居中
72 0