水平居中

margin法

html代码

<div class="box"><div class="text">我要居中</div>
</div>

css代码

.box {//无关代码已省略.text {margin: 0 auto;}
}

flex法

html代码

<div class="box"><div class="text">我要居中</div>
</div>

css代码

.box {//无关代码已省略display: flex;justify-content: center;
}

效果

垂直居中

line-height法

html代码

<div class="box"><div class="text">我要居中</div>
</div>

css代码

.box {//无关代码已省略height: 500px;.text {line-height: 500px;//与height相同}
}

注意：需换行的文本不要使用此方法

flex法

html代码

<div class="box"><div class="text">我要居中</div>
</div>

css代码

.box {//无关代码已省略display: flex;align-items: center;
}

效果

CSS垂直及水平居中小技巧相关推荐

css选择器顺序的小技巧
在线演示本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
CSS 12个趣味小技巧大公开 | 原力计划
作者 | zoyoy 责编 | 伍杏玲出品 | CSDN博客 CSS单行/多行文本,超出隐藏并显示省略号方法一:使用CSS属性单行文本溢出显示省略号 width: 100px; overflow ...
css background 一半_CSS小技巧
点击上方蓝字关注我们左右布局将内部的子元素加浮动,父元素清除浮动即可. 代码: DOCTYPE html><html><head><title>tes ...
25条div+CSS编程提醒及小技巧整理
1.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次:对一个标签同时使用clas ...
关于css命名规范一些小技巧或经验
前言通过前边自己进行了一周自适应招聘官方网站PC端和移动端的开发,自己在开发过程中也遇到了一些css命名规范的令人头疼的事情,自己回过头来看自身的代码认真思考并总结了一些不成熟的经验,下文将向大家介 ...
CSS捉迷藏插画简单,CSS学习进阶：一些CSS设计的实用小技巧参考
放到标签下,然后为div指定一个类,然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientWi ...
css和HTML布局小技巧
一:水平居中 1. 如下所示,让child在parent中水平居中 <!DOCTYPE html> <html> <head lang="en"> ...
CSS设置 background-image透明度小技巧
在做数据总览得时候看到网上示例在div容器里加背景图还能,感觉大气又不单调,就想给自己得项目也尝试下,先来看看我想达到的样子(网上看到的): 网图不清楚没办法,但是就是这种类似水印得效果.具体怎么实现 ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...

CSS垂直及水平居中小技巧

CSS垂直及水平居中小技巧

水平居中

margin法

flex法

效果

垂直居中

line-height法

flex法

效果

CSS垂直及水平居中小技巧相关推荐

最新文章

热门文章