龙空技术网

Html5-CSS之元素的五大居中方式

麻油叶 213

前言:

现时同学们对“html字体怎么居中”大约比较珍视,看官们都想要分析一些“html字体怎么居中”的相关文章。那么小编在网上汇集了一些关于“html字体怎么居中””的相关资讯,希望各位老铁们能喜欢,姐妹们快快来了解一下吧!

我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取

Html5-CSS之五大居中方式

你是不是也对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?恭喜你,搜到这篇博客! 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有所帮助!

下面的居中示例中,统一使用了同一个div作为父元素和p作为子元素

设置一个div,并且设置了div的宽高边框,div里面设置一个块元素p,设置了它的宽高和背景色

css居中方式1

<!doctype html><html><head><meta charset="utf-8"><title>五大居中1</title><style>*{margin:0;}div{width:200px;height:300px;border:2px solid #000;margin:200px auto;text-align:center;font-size:0;}div p{width:100px;height:100px;background:#666;display:inline-block;vertical-align:middle;}div:after{content:"";display:inline-block;height:100%;vertical-align:middle;}</style></head><body><div>	<p></p></div></body></html>

这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素,并使得样式为inline-block;height:100%;就是和父元素一样高,vertical-align:middle;垂直居中,也就是p元素相对与伪元素居中,由于伪元素和div一样高,所以相当于p元素在div里垂直居中。

css居中方式2

<!doctype html><html><head><meta charset="utf-8"><title>五大居中2</title><style>*{margin:0;}div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}p{position:absolute;left:0;bottom:0;right:0;top:0;margin:auto;width:100px;height:100px;background:#f99;}</style></head><body><div>	<p></p></div></body></html>

这里利用了定位居中

子元素p设置position:absolute脱离文档流,默认以html作为父元素,所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动,left:0;tight:0;top:0;bottom:0;(只有设置了定位的元素才可以使用这种方式来移动),最后margin:auto;就会水平和垂直都居中。

css居中方式3

<!doctype html><html><head><meta charset="utf-8"><title>五大居中3</title><style>*{margin:0;}div{display:flex;justify-content:center;align-items:center;width:300px;height:400px;border:1px solid #000;margin:100px auto;}p{width:100px;height:100px;background:#f99;}</style></head><body><div>	<p></p></div></body></html>

这里利用了弹性盒居中

父元素div设置成弹性盒样式,justify-content:center;主轴居中

align-items:center;垂直居中(而且这两个只能设置在父元素上,弹性盒知识)

css居中方式4

<!doctype html><html><head><meta charset="utf-8"><title>五大居中4</title><style>*{margin:0;}div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}p{width:100px;height:100px;background:#f99;position:absolute;left:50%;top:50%;margin:-50px 0 0 -50px;}</style></head><body><div>	<p></p></div></body></html>

利用定位线左上角居中,然后左移子元素宽度的一半,再上移子元素高度的一半。

css居中方式5

<!doctype html><html><head><meta charset="utf-8"><title>五大居中5</title><style>*{margin:0;}div{position:relative;width:300px;height:400px;border:1px solid #000;margin:100px auto;}p{position:absolute;width:100px;height:100px;background:#f99;left:50%;top:50%;	transform:translate(-50%,-50%);}</style></head><body><div>	<p></p></div></body></html>

利用动画移动属性transform

结语

相信看了上面的有关Html5、css的元素五大居中方式,你们就可以解决自己的小问题了,但是也要养成一个总结的好习惯。好记性不如烂笔头!以前留下来的话语总是有他的道理。Come on!

原文链接:

标签: #html字体怎么居中