CSS七种常用居中方式

1. 水平居中

效果:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">body {background-color: #CCC;}.container {margin: 0 auto;background-color: #ddd;text-align: center;}</style>
</head><body><div class="container"><span>这是c_kite的CSDN博客</span></div>
</body></html>

或者使用绝对定位方式

    .container {position: absolute;left: 50%;width: 960px;margin-left: -480px;text-align: center;background: #ddd;}

2. 自适应块级元素水平居中

效果: 宽度不固定, 也可以自适应居中

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.container{display: inline-block;}.box {width: 50px;height: 50px;list-style: none;border: 1px solid #ccc;border-radius: 50%;padding: 0;box-shadow: 0 6px 12px rgba(0,0,0,.175);}.container .center{position: relative;left: 50%; /*左边缘移动到父元素的中心*/transform: translateX(-50%); /*左边缘向左移动自身宽度的一半*/text-align: center; /*文字居中*/}</style>
</head><body><div class="container"><div class="box"></div><div class="center">hi</div></div>
</body></html>

3. 行内元素垂直居中

单行文本垂直居中

效果:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.row {width: 300px;height: 50px;line-height: 50px;border: 1px solid black;text-align: center;}</style>
</head><body><div class="row">你好你好你好</div>
</body></html>

4. 多行文本垂直居中

( 1 ). 不固定高度垂直居中

效果:

代码:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.row {width: 200px;padding: 50px;border: 1px solid black;}</style>
</head><body><div class="row">你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</div>
</body></html>

( 2 ). 固定高度多行文本居中

效果:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.wrap {height: 200px;display: table;/*此元素会作为块级表格来显示*/}.content {vertical-align: middle;/*把此元素放置在父元素的中部*/display: table-cell;/*此元素会作为一个表格的单元格显示*/border: 1px solid black;width: 400px;}</style>
</head><body><div class="wrap"><div class="content">博主非常喜欢林徽因的诗句: 我情愿化成一片落叶， 让风吹雨打到处飘零； 或流云一朵，在澄蓝天， 和大地再没有些牵连。</div></div>
</body></html>

5. 块级元素的垂直居中

( 1 ). 固定高度

效果:

代码:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.wrap {width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;background: #dddddd;}</style>
</head><body><div class="wrap">博主非常喜欢林徽因的诗句</div>
</body></html>

( 2 ). 不固定高度

效果:

代码:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.wrap {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/*左, 上边缘向左, 上移动自身宽, 高度的一半*/background: #dddddd;}</style>
</head><body><div class="wrap">博主非常喜欢林徽因的诗句</div>
</body></html>

6. 基于视口单位的解决方案

效果:

代码:

<!DOCTYPE html>
<html lang="en"><head><title>水平居中</title><style type="text/css">.wrap {width: 200px;padding: 20px;margin: 50vh auto 0;/*外边距采用视口单位*/transform: translateY(-50%);/*上边缘向上移动自身高度的一半*/background: #dddddd;}</style>
</head><body><div class="wrap">博主非常喜欢林徽因的诗句</div>
</body></html>

7. 基于FlexBox的解决方案

当使用flexbox的时候. 样式margin设置为auto不仅在水平方向上居中, 在垂直方向上也居中, 如果仅需要实现单独的垂直居中需求, 需使用align-self设置为center
效果:

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>水平居中</title><style type="text/css">body{display: flex;min-height: 100vh;margin: 0;}.wrap {margin: auto;padding: 20px;background: #dddddd;}</style>
</head><body><div class="wrap">博主非常喜欢林徽因的诗句</div>
</body></html>

CSS七种常用居中方式相关推荐

QT学习笔记（七）：定时器事件的3种常用使用方式
QT学习笔记(七):定时器事件的2种常用使用方式 Qt中定时器的使用有2种方法:一种是使用QObject类提供的定时器通过重载 timerEvent 事件处理过程函数,一种就是使用QTimer类. 其 ...
七种Vue3传值方式
七种Vue3传值方式 props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) Props方式 Props方式是Vue中最常 ...
七种常用的PHP程序开发工具
互联网的流行使得,软件程序发的需求也越来越大,其中PHP程序开发就是一个先例.PHP是英文超级文本预处理语言Hypertext Preprocessor的缩写.PHP 是一种 HTML 内嵌式的语言, ...
jQuery中ajax的4种常用请求方式
jQuery中ajax的4种常用请求方式:1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信 ...
伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
移动小额支付业务系统几种常用实现方式的分析和比较
关键词: 移动小额支付小额支付移动支付电子支付摘要: 随着移动小额支付业务逐渐走入人们的日常生活中,它已成为运营商争夺的数据业务焦点之一.文章对当前移动小额支付业务系统的 ...
Mysql中的七种常用查询连接详解
目录一.概述二.连接查询的分类三.七种常用连接查询详解 1.笛卡尔积: 2.内连接 2.1隐式与显式连接 ?2.2等值连接 ?2.3非等值连接 ?2.4自连接 3外连接 3.1左外连接: ?3. ...
HTTP的两种常用请求方式GET和POST
HTTP的两种常用请求方式GET和POST HTTP:HTTP协议(HyperText Transfer),用于从万维网(WWWW:World Wide Web)服务器传输超文本到本地浏览器的传输协议 ...
Javascript创建对象的七种常用方式
js常用的几种创建对象的方式有: 1.{} 2.new Object() 3.使用字面量 4.工厂模式 5.构造函数模式(constructor) 6.原型模式(prototype) 7.构造函数+原 ...

CSS七种常用居中方式

1. 水平居中

2. 自适应块级元素水平居中

3. 行内元素垂直居中

单行文本垂直居中

4. 多行文本垂直居中

( 1 ). 不固定高度垂直居中

( 2 ). 固定高度多行文本居中

5. 块级元素的垂直居中

( 1 ). 固定高度

( 2 ). 不固定高度

6. 基于视口单位的解决方案

7. 基于FlexBox的解决方案

CSS七种常用居中方式相关推荐

最新文章

热门文章