css文本居中的几种方式

行内元素 还是 块状元素 ,块状元素里面又分为定宽块状元素,以及不定宽块状元素
一、左右居中
1.行内元素:
常用的inline元素有:
<a>、<span>、
、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
(1)给父元素设置
text-align:center

2.块状元素:
常用的块状元素有,
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
(1)定宽块状元素(width值或百分比已经固定的元素)
①通过设置“左右margin”值为“auto”来实现居中的。
width:200px;margin:20px auto;
(2)不定宽元素(width值且百分比没有固定)
①加入 table 标签
②设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
③设置 position:relative和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
二、垂直居中
1.父元素高度确定的单行文本:
height:100px;line-height:100px;

2.父元素高度确定的多行文本:
(1)通过table属性设置(tr、td、etc)
vertical-align:middle

(2)或者
display:table-cell;

学习前端的同学注意了!!!
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入前端学习交流群461593224,我们一起学前端!

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,349评论 1赞 92
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 1,210评论 0赞 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,410评论 0赞 3
  • 水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显...
    CAICL阅读 530评论 0赞 3
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,774评论 0赞 30

友情链接更多精彩内容