居中对齐的几种方式

水平居中对齐的几种方式

1.对于最简单的行内元素的居中采用text-align:center;设置即可//1.注意是父元素添加2.子元素会继承父元素的居中方式

父元素添加 text-align: center;子元素中的所有的行内标签都会水平居中，块级标签中的文字也会居中，即是说，父元素拥有text-align: center;子元素中的字体和行内元素都会居中，并且效果延续至子代。

text-align:center；//父元素拥有，子元素水平居中

 <div class="ta"><!-- //块级元素 --><p>你好 世界</p>你好 世界 //<h1>你好 世界</h1><div>你好 世界</div><!-- 行内元素 --><img src="./搜索.svg" alt=""></div>.ta {width: 400px;height: 400px;background-color: rgb(137, 177, 177);text-align: center;display: inline-block;/* overflow: hidden; */}.ta p {font-size: 120%;}.ta div {margin-top: 50px;width: 200px;height: 200px;background-color: antiquewhite;}

遇到了高度塌陷

2.marin:0 auto;对于已知宽度的元素使用，实现水平居中。

 <div class="content content2"><div class="center2">划线区域部分采用margin:0 auto;来实现水平居中显示，需提前写好元素的宽度。</div></div>.content {height: 100px;border: 2px solid #fff;}.content2 {background: #645d5a;text-align: center;}.center2 {height: 50px;width: 60%;border: 2px solid rgb(207, 136, 136);line-height: 50px;margin: 0 auto;}

3.table始现水平居中 1. 将外部块格式化为表格单元格就可垂直居中文本。2.元素外部嵌套table始现。

 <div class="content content3"><table><tbody><tr><td>这是内容区三：用table实现。</td></tr></tbody></table>
</div>
.content3{background: #2f5d34;
}table{margin: 0 auto;}

4.块级的元素转换为行内块元素来实现块级元素的水平居中显示。

<div class="content content4"><div class="center4">块级元素转换成行内元素并且居中</div></div>.content4 {background: #9d43b4;text-align: center;}.center4 {display: inline;}

5.利用定位使元素居中，计算方式父元素的宽度减去子元素的宽度除以2 得到left或right的值，注意相对定位和绝对定位的应用。

  <div class="fu"><div class="er">我是中间的</div></div><style>.fu {position: relative;width: 500px;height: 500px;background-color: aqua;}.er {position: relative;text-align: center;line-height: 150px;width: 150px;height: 150px;left: 175px;top: 175px;background-color: aliceblue;}
</style>

垂直居中的几种方式

1.给父元素添加

line-height:（height）;//height为父元素的高度

 <div><p>你好 世界</p></div>div{width: 200px;height: 200px;line-height: 200px;}

2.文字水平垂直居中给父类元素加 vertical-align: middle; 但是这个元素有时会失灵那是因为vertical-align只作用在inline-block或者inline，还有table-cell等元素内。

<div class="three">你好 世界
</div>.three {width: 400px;height: 200px;background: #ddd;display: table-cell;vertical-align: middle;}

将外部块格式化为表格单元格表格单元格的内容可以垂直居中，将外部块格式化为表格单元格就可垂直居中文本。

3.利用flex布局垂直居中

 <div class="box">css 垂直居中--文本文字（弹性布局）</div>.box {display: flex;/*实现垂直居中*/align-items: center;/*实现水平居中*/justify-content: center;text-align: justify;width: 400px;height: 200px;background: rgb(80, 76, 76);margin: 0 auto;color: rgb(0, 0, 0);}

4.利用内边距 //使用不多用起来比较麻烦

<div class="wai"><div class="nei">中间</div></div>.wai {width: 500px;height: 500px;background-color: aqua;padding-top: 300px;padding-left: 300px;}.nei {width: 100px;height: 100px;background-color: antiquewhite;}

5.利用CSS3的定位 position加上transform来实现文字垂直居中仅作代码展示 //兼容性低

.center {position: relative;top:50%;transform:translateY(-50%);left:50%;transform:translateX(-50%);
}

6.相对绝对定位和上文的水平居中类似不做过对赘述。

7.定位加上margin 元素

 <div class="child"></div>
.child {position: fixed;width: 200px;height: 150px;background: blue;top: 50%;left: 50%;margin-top: -75px;margin-left: -100px;}

以上种种只是我总结出的居中方式，当然居中方式还有很多

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 ...

html水平垂直居中

居中对齐的几种方式

html水平垂直居中相关推荐

最新文章

热门文章