css中的特殊居中

大图居中：

先看一下普通的居中：

代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       
        .img{
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="center">
    <img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>

View Code

浏览器100%的时候显示为：

浏览器缩小时：

如图，当浏览器大小小于图片大小的时候，图片会贴靠在左边而不再移动。

我的理解是，当图片设置为居中，浏览器界面小于图片大小的时候，浏览器会挤住图片。因为图片小于浏览器的部分，浏览器不愿意收留图片多余的部分，哎图片这可怜的孩儿。当然这种情况我是看不下去的，所以，我强制让浏览器“收留”它。

代码修改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center {
            position: relative;
            left: 50%;
        }

        .img {
            display: block;
            /*margin:0 auto;*/
            position: relative;
            left: -342px;
        }
        /*主要的思路就是，图片的中心点为中心，而不是已图片的左上角为中心*/

    </style>
</head>
<body>
<div class="center">
    <img class="img" src="1.jpg" width="684" height="384">
</div>
</body>
</html>

View Code

效果图为：

如图，浏览器缩小的时候，图片依然居中。（浏览器，你敢不收留它，废了你）。

当然拿这个思路也就引出了淘宝著名的“双飞翼布局”。

简要说明一下双飞翼布局，它是当浏览器缩小的时候，中间栏随浏览器变化而变化。而侧栏不随浏览器变化而变化。

先看下效果图：

开始时候：

浏览器缩小的时候：

这种布局和上面的居中方式使用的方法基本差不多。一个字，悟。当然css3中有个方法可以简单实现这种

当然css3中有个方法可以简单实现这种。display:flex。称为“弹性盒子”这种只能ie9+

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子模型</title>
    <style>
        body{
            margin: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
            width: 300px;
            height: 300px;
        }
        .a{
            flex: 1;
            /* 100px;*/
            height: 100%;
            background-color: #0099FF;
        }
        .b{
            flex: 1;
            /* 100px;*/
            height: 100%;
            background-color: darkorange;
        }
        .c{
            flex: 1;
            /* 100px;*/
            height: 100%;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>

View Code

那代码来说，先给父类一个display:flex。然后给子类设置flex:n。

这种方法的实现思想是，如代码，子类有三个，都设置为，flex:1,意思是每个子类占父类三分之一。

用这种方法可以轻松实现双飞翼布局，如代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子模型</title>
    <style>
        body{
            margin: 0;
        }
        #container{
            display: flex;
            flex-direction: row;
            width: 300px;
            height: 300px;
        }
        .a{
            /*flex: 1;*/
            width: 100px;
            height: 100%;
            background-color: #0099FF;
        }
        .b{
            flex: 1;
            /* 100px;*/
            height: 100%;
            background-color: darkorange;
        }
        .c{
            /*flex: 1;*/
            width: 100px;
            height: 100%;
            background-color: palevioletred;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>
<script src="main.js"></script>
</body>
</html>

View Code

a,c设置固定宽度，b设置flex：1即可。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

by9.6

现阶段整理出来最好的：

 1 /**
 2  * Created by Administrator on 2016/9/6.
 3  */
 4 $(function () {
 5    
 6     var div=$("<div></div>");
 7     var content=div.clone();
 8     content.css({
 9         "960px",
10         position:"relative",
11         left:"50%"
12     });
13     var bak=div.clone();
14     bak.css({
15         position:"relative",
16         left:"-960px",
17         "1920px",
18         height:"615px",
19         background:"url(pic-big-v6.jpg)"
20     });
21     content.append(bak);
22     var con=div.clone();
23     con.css({
24         "100%",
25         overflow:"hidden"
26     });
27     con.append(content);
28     $("body").append(con);
29 });

View Code

三步：(说明：div1包围div2,div2包围div3,div3里面是背景图片)

　　①：div1: 100% overflow:hidden

　　②：div2: position：relative left:50%

　　③：div3: 导入图片，设置图片的固定宽高，width和height。position:relative left:-npx (n为图片的一半大小)　