如何实现水平/垂直居中

多种方法实现水平居中和垂直居中

一、水平居中（包含块中居中）

对于行内元素，在父级块级元素css属性中使用 text-align：center即可。
对于width固定的块级元素，使用margin:20px auto; / margin-left 与 margin-right 设置为 auto*
对于width不固定的块级元素：

1、使用table标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
第三步：把需要水平居中的元素放到table标签中的td标签中。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{margin:20px auto;
}/*下面是任务区代码*/
.wrap{background:#ccc;
}
</style>
</head>
<body>
<table><tbody><tr><td><p>设置我所在的div容器水平居中 </p> </td></tr></tbody>
</table>
</body>
</html>

2、改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 来实现居中效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{text-align:center;}
.container div{margin:0;padding:0;display:inline;}
</style>
</head><body>
<div class="container"><div><span><a href="#">1</a></span><span><a href="#">2</a></span><span><a href="#">3</a></span></div>
</div>
</body>
</html>

3、通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{float:left;position:relative;left:50%;
}
.container ul{/*  margin:0;padding:0;*/position:relative;left:-50%;
}
.container li{display:inline;}
</style>
</head>
<body>
<div class="container"><ul><li><a href="#">11111111111</a></li><li><a href="#">22222222222</a></li><li><a href="#">33333333333</a></li></ul>
</div>
</body>
</html>

垂直居中

1、父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.wrap{display:inline;text-align:center;
}
.wrap h2{height:100px;line-height:100px;background:#ccc;
}
</style>
</head>
<body>
<!--下面是代码任务部分-->
<div class="wrap"><h2>hi,imooc!</h2>
</div>
</body>
</html>

2、父元素高度确定的多行文本:
使用插入 table (包括tbody、tr、td)标签，可以把要垂直居中的div放到table的td中。

<!DOCTYPE HTML>
<html>
<head>
<meta  charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>table{margin:20px auto;}
</style>
</head>
<body>
<table><tbody>
<tr><td><div><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p><p>看我是否可以居中。</p>
</div>
</td></tr>
</tbody></table>
</body>
</html>

如何实现水平/垂直居中相关推荐

html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
js、css分别实现元素水平垂直居中
js实现元素水平垂直居中.css实现元素水平垂直居中 css实现元素水平垂直居中[4行代码] js实现元素水平垂直居中[弄巧成拙] css实现元素水平垂直居中[4行代码] #div{top:50%;l ...
html 定位元素怎么居中,绝对定位元素的水平垂直居中的方法（3种任选）
1.css实现居中缺点:需要提前知道元素的宽度和高度. Document .box{ width: 600px; height: 400px; position: absolute; left: 5 ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中行内元素html结构 <div ...
php水平垂直居中,html水平垂直居中的问题
最近遇到很多居中的问题,就花点时间总结了一下放在这里,以后找也方便 1.居中文本我在中间-- .. height+line-height+text-center(只能居中单行) .wrap{ wid ...
div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
如何让div水平垂直居中
如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE h ...

如何实现水平/垂直居中

多种方法实现水平居中和垂直居中

如何实现水平/垂直居中相关推荐

最新文章

热门文章

如何实现 水平/垂直居中

多种方法实现水平居中和垂直居中

如何实现 水平/垂直居中相关推荐

最新文章

热门文章

如何实现水平/垂直居中

如何实现水平/垂直居中相关推荐