无敌居中!!!!

不需要知道宽高:

CSS transform

<div ‘style=‘position:relative;‘ >

  <div style=‘position:absolute;top:50%;left:50%; transform: translate(-50%, -50%);‘></div>

</div>

使用display:table-cell来居中

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。
<div style=‘display: table-cell; vertical-align: middle; text-align: center;‘ >

  <div style=‘display: inline-block;‘></div>

</div>

flex布局

<div style=‘display: flex;justify-content:center;align-items:center;‘ >

  <div></div>

</div>

需要知道宽高:

使用绝对定位来居中(IE6.7无效)

通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元素宽度或高度的一半.
<div style=‘width:200px;height:200px;position:relative‘ >

  <div style=‘width:100px;height:100px;position:absolute; left:50%;top:50%;margin-left:-50px;margin-top:-50px;‘></div>

</div>

时间: 2024-10-17 12:59:20

无敌居中!!!!的相关文章

CSS 居中

一.水平或垂直居中 1. 单行内容垂直居中 /*height = line-height*/ .center{ height: 4em; line-height: 4em; overflow: hidden; /*保护布局,非必须*/ } 支持:所有块级.内联元素.所有浏览器 缺点:只能显示一行 2. div水平居中 <!--html代码--> <div class="center">div居中了</div> body{ text-align:cen

布局小窍门之----让头部和主干内容居中

平时写布局的时候要保证头部标题或者横向的菜单和主体内容居中,可以将定义一个样式,比如: <style> .container{ width: 980px; margin: 0 auto; } </style> 头部和主体部分样式都放在带有该样式的标签里: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

页面无法居中的原因

网页制作:margin:0 auto;无法居中解决方法 很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思,呵呵!小一在这里说两个典型的错误引起的不能居中的问题: 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码,根本没有设置DIV的宽度,如

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

div块上下左右居中

实现div块的上下左右居中: <!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>div块上下左右居中</title> </head> <body>     <div id="div2">     </div>     <style>     *{p

Js打开网页后居中显示

使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>打开居中的窗口</title> <script language="javascript"> //参数-url:要打开的网站,winname:打开后

Js配合CSS实现的图片居中

CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向都居中,也不是上下左右居中,位于网页的正中央,代码如下: <body onresize="myLoad()" > <div id="xuanma" style="Z-INDEX: 1; LEFT: 0px; POSITION: absolut

css未知宽高的盒子div居中的多种方法

不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:05:04 Start to work: Finish the work: Other information: --> <!DOCTYPE html>

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明外,都是兼容IE6+.谷歌.火狐等主流浏览器的. 先来说几种简单的.人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效. 2.使用 text-ali