Precondition:

<div class="parent">
<div class="item">居中</div>
</div>

方式一:使用transform

.item {
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
}

方式二:使用flex

.parent {
display: -webkit-flex;
justify-content: center; // 子元素水平居中
align-items: center; // 子元素垂直居中
}

【前端】使用CSS使元素居中的几种方式的更多相关文章

  1. css 使元素居中

    css使元素水平居中 1.对于行内元素的水平居中 给父元素设置text-align:center <div style="text-align:center;">居中显 ...

  2. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  3. CSS绝对定位元素居中的几种方法

    转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html 作者:PajamaCat 1,div宽度未知1 <body> <d ...

  4. css元素居中的几种方式

    1.水平居中 <div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div ...

  5. [CSS] 子元素垂直居中的两种方式

    1. 多个子元素水平并排,IE10以下失效 display: flex; align-items: center; justify-content: center; 2.多个子元素竖直排列,这种方式会 ...

  6. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  7. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 网站开发进阶(十七)Html元素隐藏的几种方式

    Html元素隐藏的几种方式 隐藏Html元素的方法最常用的方法有css的display:none,一种方法两种实现方式,感兴趣的朋友可以了解下. 1.使用css style="display ...

  9. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

随机推荐

  1. vuejsLearn---通过手脚架快速搭建一个vuejs项目

    开始快速搭建一个项目 通过Webpack + vue-loader 手脚架 https://github.com/vuejs-templates/webpack 按照它的步骤一步一步来 $ npm i ...

  2. 在命令行下使用perl

    http://blog.sina.com.cn/s/blog_4af3f0d20100g9oz.html aaa@domain.com  2aaa@domain.com 111bbb@home.com ...

  3. js toString()

  4. c#项目架构搭建经验

    读过.Net项目中感觉代码写的不错(备注1)有:bbsMax(可惜唧唧喳喳鸟像消失了一样),Umbraco(国外开源的cms项目),Kooboo(国内做开源cms).本人狭隘,读的代码不多,范围也不广 ...

  5. csuoj 1394: Virus Replication

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1394 1394: Virus Replication Time Limit: 1 Sec  Mem ...

  6. iis配置js支持读取json文件配置

    默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...

  7. Overview of the Oppia codebase(Oppia代码库总览)

    Oppia is built with Google App Engine. Its backend is written in Python, and its frontend is written ...

  8. mbed学习之Digital IO (一)

    mbed的IO操作非常灵活,常见的关于Digital IO操作整理如下表 ,其中蓝色字体是构造函数,绿色字体的是操作符重载,使用时只要创建对象,就可以调用对应的方法来操作,并且每种都提供了操作符重载, ...

  9. 二十、Java基础--------IO流之其他对象

    在上面两篇文章中介绍了IO体系并详细介绍了字节流以及字符流,本文主要是讲述操作文件的File.转化流.标准输入与输出.Properties.打印流以及序列流. File File英文为"文件 ...

  10. Spring学习笔记之一----基于XML的Spring IOC配置

    1. 在spring配置文件中,如果对一个property进行直接赋值,可使用<value>元素,spring负责将值转化为property指定的类型:也可以直接在property元素上使 ...