1、文字居中：

第一种方式：
当用text-align:center时，达到的是水平居中的效果，那再用vertical-align：middle；其实是实现不了垂直居中的，此时就需要用到display：table-cell去协助达到垂直居中的效果。

第二种方式：
text-align:center实现的是水平居中的效果，line-height高度要跟其元素设置的高度等同的情况下，才可以达到垂直居中的效果。

效果如下：

3、CSS中实现盒子水平垂直居中的方法

body {background-color: #6ed0ff; // 蓝色
}.father {background-color: #be33ec; // 紫色border-radius: 20px; //圆角box-shadow: 0 0 15px rgb(0, 0, 0); //阴影margin: 100px auto;width: 300px;height: 300px;
}.son {background-color: #fcff00; // 黄色border-radius: 20px;box-shadow: 0 0 10px rgb(0, 0, 0);width: 100px;height: 100px;
}

原始效果：

要实现的效果：（黄色的盒子水平垂直居中）

方法一：

grid

.father {display: grid;
}.son {align-self: center;justify-self: center;
}

方法二：

absolute + 负margin

// 子绝父相
.father {position: relative; //相对定位
}.son {position: absolute; // 绝对定位left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;
}

方法三：

absolute + transform

.father {position: relative;
}.son {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

方法四：

absolute + margin: auto

.father {position: relative;
}.son {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;
}

方法五：

flex

.father {display: flex; // 弹性盒子justify-content: center;align-items: center;
}

方法六：

margin+transfrom

.father {overflow: hidden;
}.son {margin: 50% auto;transform: translateY(-50%);
}

方法七：

table-cell

.father {display: table-cell;text-align: center;vertical-align: middle;
}.son {display: inline-block;
}

方法八：

inline-block + vertical-align

.father {text-align: center;line-height: 300px;
}.son {display: inline-block;vertical-align: middle;
}

文字居中、CSS中实现盒子水平垂直居中的方法相关推荐

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
HTML/CSS 变形（盒子水平垂直居中）、过渡、动画（学习整理）
变形 transform:scale(*) >1放大 0-1缩小 <1基于中心点对称 transform:rotate(?deg) deg(度数) 正值-顺时针旋转负值-逆时针旋转 tr ...
CSS中让元素水平垂直居中的6种写法
水平垂直居中水平居中水平垂直居中--flex布局 margin + position:absolute布局 transform + absolute absolute + margin负值 abs ...
css --- [小结]让盒子水平垂直居中的解决方案
描述有如下模型,想办法让 <style>.box{width: 500px;height: 500px;background: skyblue;} </style> < ...
CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
div盒子水平垂直居中的方法
一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%, ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...

文字居中、CSS中实现盒子水平垂直居中的方法

1、文字居中：

3、CSS中实现盒子水平垂直居中的方法

方法一：

方法二：

方法三：

方法四：

方法五：

方法六：

方法七：

方法八：

文字居中、CSS中实现盒子水平垂直居中的方法相关推荐

最新文章

热门文章

文字居中、CSS中实现盒子水平垂直居中的方法

1、 文字居中：

3、CSS中实现盒子水平垂直居中的方法

方法一：

方法二：

方法三：

方法四：

方法五：

方法六：

方法七：

方法八：

文字居中、CSS中实现盒子水平垂直居中的方法相关推荐

最新文章

热门文章

1、文字居中：