一、单行文本水平垂直居中

1.文本水平居中：给文本的父盒子设置text-align: center;即可
2.文本垂直居中: 给文本设置line-height的值与父盒子height的值相等

<style>.box {width: 200px;height: 200px;background-color: palegreen;text-align: center;line-height: 200px;}
</style>
<div class="box">box
</div>

3.利用弹性盒模型，设置align-item:center;justify-content:center;实现文本水平垂直居中

<style>.box {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: palegreen;}
</style>
<div class="box">box
</div>

二、块级元素水平垂直居中

方法一：
父元素相对定位+子元素绝对定位+手动计算margin

<style>.box {position: absolute;left: 50%;top: 50%;margin-top: -100px;margin-left: -100px;width: 200px;height: 200px;background-color: palegreen;}
</style>
<div class="box"></div>

方法二：
父元素相对定位+子元素绝对定位+transform

<style>.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: palegreen;}
</style>
<div class="box"></div>

方法三：
父元素相对定位+子元素绝对定位+ top:0;right:0;bottom:0;left:0; +margin:auto

<style>.box {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 200px;height: 200px;background-color: palegreen;}
</style>
<div class="box"></div>

方法四：
给父盒子设置display:flex;开启弹性布局，然后设置align-item:center;justify-content:center;

<style>body {display: flex;justify-content: center;align-items: center;}.box {width: 200px;height: 200px;background-color: palegreen;}
</style>
<div class="box"></div>

CSS实现文本居中和块级元素居中相关推荐

html盒子模型图片居中,html学习笔记（img+body+盒子模型+块级元素居中+margi塌陷+float+文字围绕、打点）...
1.使用img产生间隔问题 img属于行级块级元素(标签)其属性display的值为inline-block,因有inline元素,故有文字属性,如果换行使用多个img标签来显示图片的时候,因换行带来 ...
[css] clear属性只对块级元素有效么？为何无法应用于行内元素？
[css] clear属性只对块级元素有效么?为何无法应用于行内元素? block元素浮动之后已经脱离了文档流了,排列的顺序都不一样了,所以清除了之后有效果. inline-block还是在文档流里面 ...
css text-align属性，行内元素，块级元素居中详解
一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS 框的生成：块级元素和块框
在盒模型中,一切皆为框,即页面上的每个元素会生成一个矩形框.默认情况下,一个元素的类型,决定了该元素生成框的类型.块级元素生成块级框,行内级元素生成行内级框,没有被任何元素所包含的文本生成匿名框. 也 ...
CSS文档流与块级元素和内联元素
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
行内元素与块级元素居中方法
一.行内元素前言:觉得之前写的那篇关于水平居中.垂直居中.水平垂直居中的博客写的不太好,所以又整理了一遍. 之前博客的地址 1. 水平居中方法一:text-algin:center 父元素设置:t ...
js追加html内容换行符,javascript – 从HTML中提取文本,同时保留块级元素换行符
考虑: /** * Returns the style for a node. * * @param n The node to check. * @param p The property to r ...
CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...

CSS实现文本居中和块级元素居中

一、单行文本水平垂直居中

二、块级元素水平垂直居中

CSS实现文本居中和块级元素居中相关推荐

最新文章

热门文章