css使元素居中的九种办法
来源:互联网 发布:ipad淘宝在哪里看微淘 编辑:程序博客网 时间:2024/05/16 18:37
一、使用text-align: center;居中
对于行内元素或具有inline-block属性的元素居中,比如span、img等可以使用text-align: center;来实现。
/*css*/div{ border:1px solid red; text-align: center; width: 200px;}div span{ width: 100px; background: #ddd;}<!--HTML--><div> <span>我是span元素</span></div>
/*css*/div{ border:1px solid red; text-align: center; width: 200px;}div img{ height: auto; background: #ddd;}<!--HTML--><div> <img src="a.jpg" alt="马超" width="100"></div>
二、使用margin: auto;居中
使用margin: auto;来居中是平时布局里面最常用的了,但是和第一种方法不同的是这种css属性作用于本身元素,且必须给元素设定了宽度和具有display:block;的块级元素。
/*css*/div{ border:1px solid red; width: 200px;}div span{ width: 150px; background: #ddd; margin:0 auto; display: block;}<!--HTML--><div> <span>我是span元素</span></div>
三、定位居中
这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度
/*css*/div{ border:1px solid red; width: 200px; height: 200px; position: relative;}div span{ width: 150px; height: 50px; background: #ddd; position: absolute; left: 25px; top:75px;}<!--HTML--><div> <span>我是span元素</span></div>
四、margin:auto;和定位的组合使用
这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度。
/*css*/div{ border:1px solid red; width: 200px; height: 200px; position: relative;}div span{ width: 150px; height: 50px; background: #ddd; position: absolute; margin:auto; left: 0; right: 0; top:0; bottom: 0;}<!--HTML--><div> <span>我是span元素</span></div>
五、负margin和定位的组合使用
/*css*/div{ border:1px solid red; width: 200px; height: 200px; position: relative;}div span{ width: 150px; height: 50px; background: #ddd; position: absolute; left: 50%; top:50%; margin:-25px 0 0 -75px;}<!--HTML--><div> <span>我是span元素</span></div>
六、calc和定位的组合使用
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
calc使元素居中的原理和负margin是一样的,calc 允许你基于当前的页面布局计算尺寸。在上面的简单计算中, 50% 是容器元素的中心点,但是如果只设置50%会使图片的左上角对齐div的中心位置。 我们需要把图片向左和向上各移动图片宽高的一半。计算公式为:
top: calc(50% - (40% / 2));left: calc(50% - (40% / 2));
/*css*/div{ border:1px solid red; width: 200px; height: 200px; position: relative;}div span{ width: 150px; height: 50px; background: #ddd; position: absolute; top: calc(50% - (50px / 2)); left: calc(50% - (150px / 2)); }<!--HTML--><div> <span>我是span元素</span></div>
七、使用translate居中
这种方法实现原理和第五种是一样的,就是用css3的属性translate来达到和负margin一样的作用。translate是transform的一个值,在这里作用是定义2D转换。但是在IE9以下不支持。
/*css*/div{ border:1px solid red; width: 200px; height: 200px; position: relative;}div span{ width: 150px; height: 50px; background: #ddd; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);}<!--HTML--><div> <span>我是span元素</span></div>
八、使用flex居中
使用flex居中不需要知道元素本身宽高以及元素的属性。
/*css*/div{ border:1px solid red; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center;}div span{ background: #ddd;}<!--HTML--><div> <span>我是span元素</span></div>
九、使用table-cell居中
使用 display: table-cell, 而不是使用table标签; 可以实现水平居中和垂直居中,但是这种方法需要添加额外的元素作为外部容器。
/*css*/.center-aligned{ border:1px solid red; width: 200px; height: 200px; display: table;}.center-core{ display: table-cell; text-align: center; vertical-align: middle;}span{ background: #ddd;}<!--HTML--><div class="center-aligned"> <div class="center-core"> <span>我是span元素</span> </div></div>
2 0
- css使元素居中的九种办法
- HTML元素居中的几种办法
- CSS使元素居中的方法
- 将float元素居中的几种办法
- css元素居中的一系列问题
- CSS使元素水平垂直居中的方法
- css使所有子元素全部居中的方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法(转)
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- CSS 元素垂直居中的 6种方法
- css两种块状定长元素居中方法的不同点
- CSS 元素垂直居中的 6种方法
- 牧师和魔鬼游戏制作
- Combination Sum系列问题
- sublime text
- 08-jQuery和ajax
- Ruby_IO类
- css使元素居中的九种办法
- Yii2 – 如何写一个插件 , 如何做一个扩展
- 第一天学习MySql(2)-学会表的操作
- eclipse 使用maven构建 springboot +swagger
- 对 面向对象 的理解
- 132. Palindrome Partitioning II
- Maven环境的配置
- 133. Clone Graph
- Round A APAC Test 2017 Problem C. Jane's Flower Shop 二分、高精度要求