jikeytang/[ Html ] - 20140611-题目1

hjzheng · 2014-06-11T01:31:48Z

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*1. 使用父元素居中*/
        .warp {
            margin: 0 auto;
            width: 100px;
            height: 100px;
        }

        .test {
            float: left;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
     <div class="warp">
        <div class="test"></div>
     </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*2*/
        .warp {
            margin: 0 auto;
            width: 90px;
            height: 90px;
            border: 1px solid #000;
        }

        .test {
            float: left;
            width: 45px;
            height: 45px;
            background: red;
            position: fixed;
            left: 50%;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="test"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*3*/
        .warp {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: relative;
        }

        .test {
            float: left;
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="test"></div>
    </div>
</body>
</html>

fanqie · 2014-06-11T01:52:43Z

1、稍微有些不一样

  <div style="width:100%;height:100px;">
  <div style="float:left;width:200px;height:100px;background-color:#f76;margin-left:50%;left:-100px;position:relative">浮动居中<div>
  </div>
    ```
2、3与都一样就不写啦~ left:50%;top:50%;margin-left:-xxpx;margin-top:-xxpx;

ShiSheng · 2014-06-11T09:17:03Z

第二三题，如果position fixed 的宽度不固定呢。

imEhllBdPGMVaArZ · 2014-06-11T10:24:43Z

@ShiSheng
第二题的你可以用来试试，只关乎所参考元素的宽度~~

qiangspecial · 2014-06-13T07:47:52Z

<!-- 先来几个万能的 -->
<style>
*{margin:0;padding:0;}
.clear{clear:both;height:20px;}
/* IE9+ 未知宽高 */
.div1 {
    position: absolute; /* position:relative; 也可，看具体环境 */
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    background: #f00;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);   
}

/* IE8+ 未知宽高 */
.div2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    height: 200px;
    background: #f30;
    margin: auto;
}

/* IE8+ 未知宽高 */
/* IE6,7有方法可实现 有兴趣的可以去查查通过line-height和font-size的比例 */
.wrap-div3 {
    display: table-cell;
    vertical-align: middle;
    width: 500px;
    height: 500px;
    border: 1px solid #f00;
    text-align: center;
}
.div3 {
    display: inline-block;
    width: 300px;
    height: 200px;
    background: #f60;   
}

/* 已知宽高的应该都知道 */
.xxxx {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 200px;
    margin: -100px 0 0 -250px;
}


/* IE6+ 未知宽水平居中 */
/* 此方法要多加一个div,浮动元素里面添加一个div */
.wrap-div4 {
    position: relative;
    left: 50%;
    float: left;
}
.div4 {
    width: 500px;
    margin-left: -50%;
    background: #f00;
}
/* 水平居中方法 */
.mg {/* margin方法 */
    width: 500px; /* margin: 0 auto;一定要定宽才有用 */
    margin: 0 auto;
}
/*另外一个方法是子元素设置为display: inline-block; 父元素设置text-align:center;*/
</style>
<div class="div1">IE9+ 未知宽高</div>
<div class="div2">IE7+ 未知宽高</div>
<div class="wrap-div3">
    <div class="div3">IE8+ 未知宽高</div>
</div>
<div class="wrap-div4">
    <div class="div4">未知宽水平居中</div>
</div>
<!-- 更多的自己去发掘 -->

定宽居中

.fixed {
    position:fixed;
    left: 50%;
    margin-left: 50px; /* 定宽居中div宽度的一半 */
}

hjzheng · 2014-06-14T01:31:37Z

3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .warp {
        position: absolute;
        width: 400px;
        height: 200px;
        background: #ffffff;
        border: 2px solid red;
        left: 50%;
        top: 50%;
        margin-top: -102px;
        margin-left: -202px;
    }
</style>
<body>
    <div class="warp"></div>
</body>
</html>

ShiSheng · 2014-06-16T08:15:53Z

@whateveryouknow 如果父级的也不知道呢？
transform:translate(-50%,-50%); 用这个就可以解决了。

	1. 如何居中一个浮动元素？
	2. 如何使一个position:fixed的元素居于定宽居中div的右侧，
	且随着窗口大小变化而位置不变？
	3. 如何居中一个psoition:absolute元素？

	PS:
	1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
	```html
	// you code
	```
	2. 也可以粘贴jsfiddle地址，比如：
	http://jsfiddle.net/jikeytang/Rmt8M/
	评论支持markdown语法。
	[http://jsfiddle.net/jikeytang/Rmt8M/](http://jsfiddle.net/jikeytang/Rmt8M/)

jikeytang/[ Html ] - 20140611-题目1

hjzheng commented Jun 11, 2014

fanqie commented Jun 11, 2014

ShiSheng commented Jun 11, 2014

imEhllBdPGMVaArZ commented Jun 11, 2014

qiangspecial commented Jun 13, 2014

hjzheng commented Jun 14, 2014

ShiSheng commented Jun 16, 2014