元素的水平垂直居中解决方法

有时候为了使页面元素看起来更美观，常常会让元素水平居中，垂直居中。下面总结了几个常用的方法。

首先HTML结构如下：

1   <div class="out">
2     <div class="in">布局</div>
3   </div>

方法1、使用最流行的flex布局方案。

1 .out {
2     display: flex;
3     justify-content: center;
4     align-items: center;
5 }

方法2、使用定位和偏移

1 .out {
2       position: relative;
3 }
4 .in {
5       position: absolute;
6       top: 50%;
7       left: 50%;
8       transform: translate(-50%, -50%);
9 }

使用transform可以不用考虑内部元素的宽高。

方法3、使用定位和负margin

 1 .out {
 2       position: relative;
 3 }
 4 .in {
 5       position: absolute;
 6       top: 50%;
 7       left: 50%;
 8       margin-left: -25px;
 9       margin-top: -12.5px;
10 }

此时，需要明确内部元素的宽高。（这里设置的内部元素in是高25px，宽50px）

方法4、使用定位和margin：auto；

 1 .out {
 2       position: relative;
 3 }
 4 .in {
 5       position: absolute;
 6       top: 0;
 7       left: 0;
 8       right: 0;
 9       bottom: 0;
10       margin: auto;
11 }

如果内部只有文本没有标签，如下：

<div class="table">直接文字居中</div>

则可以设置：

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

或者是设置 line-height 为元素高度。

几个简单的是元素水平居中垂直居中的方法，有新方法再继续补充。

转载于:https://www.cnblogs.com/xguoz/p/11413534.html

元素的水平垂直居中解决方法相关推荐

html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）
1.css实现居中缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...

元素的水平垂直居中解决方法

元素的水平垂直居中解决方法相关推荐

最新文章

热门文章