Skip to content

Instantly share code, notes, and snippets.

@jikeytang

jikeytang/[ Html ] - 20140611-题目1

Last active August 29, 2015 14:02
Show Gist options
  • Save jikeytang/d62f64f1fa6af3d18f0d to your computer and use it in GitHub Desktop.
Save jikeytang/d62f64f1fa6af3d18f0d to your computer and use it in GitHub Desktop.
Download ZIP
[ Html ] - 20140611-题目1
Raw
[ Html ] - 20140611-题目1
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/)
@hjzheng
Copy link

hjzheng commented Jun 14, 2014

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment