如何使元素/文字 垂直居中？

昨天面试被问到这个问题，自己常用的是方法一和方法二，回来后查阅到了方法三，感觉莫名的好用，记录一下~

方法一：单行文字垂直居中 line-height等于height

方法二：块级元素垂直居中 position定位或者flex布局

水平居中 margin: 0 auto;+垂直位移position: relative；top: 50%;

注意：此时当前操作元素的头部到达页面一半的水平线处，

最后使用transform: translateY(-50%)，使得元素向上平移（translate）自身高度的一半(50%)

方法三：父元素设置display：table，子元素设置table-cell

容器设为display:table，使他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，

然后就像在表格里一样，给子元素加个vertical-align: middle就行了，从而实现多行文字垂直居中

此外，display: table还能解决多列自适应布局和等高布局，如下：

display:table系列几乎是和table系的元素相对应的：

table （类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table （类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group （类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group （类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group （类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row （类似 <tr>）此元素会作为一个表格行显示。
table-column-group （类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column （类似 <col>）此元素会作为一个单元格列显示。
table-cell （类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption （类似 <caption>）此元素会作为一个表格标题显示。

“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局，使我们能够轻松定义一个单元格的边界、背景等样式，而不会产生因为使用了table那样的制表标签所导致的语义化问题。

原文地址：https://www.cnblogs.com/chengl062/p/11388144.html

时间： 2024-11-08 22:03:35

如何使元素/文字 垂直居中？的相关文章

【整理】如何使元素水平垂直居中

第一种:已知元素宽.高 兼容:IE6+ 源码: <title>css使元素垂直居中</title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: grey; /*css使元素垂直居中*/ position: relative; } .box .center{ width: 100px; height: 100px; background-col

关于使用绝对定位使元素垂直居中的问题

今天学习中遇到了使元素垂直居中的问题,网上一搜至少有8种不同的方法,我只试了使用绝对定位的方法.这一试不要紧,一试就懵逼了.下面我把我遇到的问题说一下. 我刚开始是这么试的: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>one</title> </head> <style rel="stylesheet&qu

父元素 高度固定，如何使其中的文字垂直居中？

方法一: 设置父元素高度,设置子元素行高垂直居中 <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </st

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

CSS 使元素垂直居中

重点内容:负外边距,绝对垂直居中,box 拓展点:设置inline-block,使元素居中 1.实现文字居中对齐 水平居中:text-align:center 垂直居中:设置line-height和height一样 2.实现元素居中对齐 使用元素定位,并移动元素  方法1:负外边距法(兼容IE) 原理:使用绝对定位,定位元素left和top值都为50%:然后使用margin移动负的元素半宽高 条件:需要知道当前元素的宽高. 代码: #content1{ position: relative; w

元素、文字垂直居中

让一个元素垂直居中是我们开发经常遇到的问题,下述整理各种情况: div垂直居中 场景设定:让一个50px*50px的Div在一个200px*200px的Div中垂直居中. <style> #content { width: 200px; height: 200px; border: 1px dashed #333; } #content div{ width: 50px; height: 50px; border: 1px solid #f00; } </style> <di

使元素相对于窗口或父元素水平垂直居中的几种方法

如果一个元素具有固定或相对大小,要使其不管如何调整窗口大小或滚动页面,始终位于浏览器窗口中间,可使用如下方法: <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><meta charset="utf-8&q

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

《转》CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&