css：居中的几种布局方式

居中布局的方式

初始状态

<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;}.inner {width: 30px;height: 30px;background-color: #000;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

1、普通方式

定宽
水平居中

.inner {margin: 0 auto;
}

文本水平居中，对行内元素/行内块级元素有效

text-align: center;

文本垂直居中，这两个属性设置一样大小

height: 30px;
line-heigth: 30px;

2、定位

定宽

<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;// 新增position: relative;}.inner {width: 30px;height: 30px;background-color: #000;// 新增position: absolute;left: 50%;top: 50%;// height的一半margin-top: -15px;// width的一半margin-left: -15px;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

支持宽高未知

<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;// 新增position: relative;}.inner {width: 30px;height: 30px;background-color: #000;// 新增position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

3、flex

支持宽高未知

.outer {display: flex;justify-content: center;align-items: center;
}

4、网格布局grid

支持宽高未知
可以看我的这篇 css：网格布局

.outer {display: grid;justify-content: center;align-items: center;
}

5、表格布局

支持宽高未知

<!DOCTYPE html>
<html lang="en">
<head><style>.outer {width: 100px;height: 100px;border: 1px solid #f00;display:table-cell;text-align: center;vertical-align: middle;}.inner {display: inline-block;width: 30px;height: 30px;background-color: #000;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>
</html>

总结

方式一：定宽居中适合
方式二：能不用尽量不用，因为 position: absolute; 会脱离文档流，除非那种确实要脱离文档流的布局再用
方式三：常用
方式四：兼容性不如方式三
方式五：需要兼容IE的才使用

css：居中的几种布局方式相关推荐

CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局常见的单列布局有两种: header.cont ...
css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格子级容器为display:table-cell 一个单元格特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
css的常见6种布局方式
下面主要是针对三栏布局进行介绍:常见的三栏布局有,流体布局.圣杯布局.双飞翼布局.flex布局.绝对定位布局.网格布局流体布局两边的宽度是固定的,中间的宽度是可以根据屏幕的大小进行改变的.实现的关 ...
css的几种布局方式都在这
说道布局方式,是我们经常遇到的问题,下面我们就来讲解css的常见的一些布局方式. 1.双飞翼布局(两边定宽,中间自适应) 主要是通过浮动与margin实现,代码如下: <!DOCTYPE htm ...
HTML+CSS 五种布局方式
已知布局元素的高度,写出三栏布局,要求左栏.右栏宽度各为300px,中间自适应. 一.浮动布局 <!DOCTYPE html> <html> <head><m ...
Android开发的之基本控件和详解四种布局方式
Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...
常用的几种布局方式---Flex 布局(垂直居中展示）
常用的几种布局方式---Flex 布局(垂直居中展示) 前言一.默认使用静态布局二.flex布局 1.父元素container 1.1.display:flex 1.2.flex-directio ...
[转]企业网站首页设计常见的6种布局方式
在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不了大框套小框的设计布局思路,不加思索的跳入单一的网页布局形式中,于是就有了把企业站常用的页面布局方式总结一下的想法,让 ...
企业网站首页设计常见的6种布局方式
转载自:http://www.wzsky.net/html/Website/Experience/120178.html 在群里和大家交流时,看到太多的网页设计师发布企业站的个人作品,设计中总是摆脱不 ...

css：居中的几种布局方式

居中布局的方式

1、普通方式

2、定位

3、flex

4、网格布局grid

5、表格布局

总结

css：居中的几种布局方式相关推荐

最新文章

热门文章