Center an Item with Position: Relative

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

How to center a relative div?

Here is a start. Look at the following CSS:

#bottom {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #FFF;}

#secondsection {
    background-size: 100% auto;
    background-size: cover;
    color: #eaeaf0;
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 35px;
    padding-bottom: 35px;
    position: relative;
    border: 1px dotted red;
}

#ss_top {
    width: 100%;
    height: 100%;
    border: 1px dotted blue;
    overflow: auto;
}
#ss_top p {
    margin: 0;
}

.ss_title {
    display: inline-block;
    color: #000000;
    font-family: 'Eurostile';
    font-size: 35px;
    text-transform: uppercase;}

.ss_title2 {
    color: #a5a5a5;}

#gallerybutton {
    position: relative;
    display: inline;
    float: right;
    margin-right: 0%;
    margin-top: 50px;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

#projects {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 2000px;
    padding: 175px 0px 0px 0px;
    border: 1px dashed blue;
}

#pr_one, #pr_two {
    display: block;
    border: 2px dashed blue;
    overflow: auto;
    text-align: center;
}

.pr_img {
    display: inline-block;
    width: 30%;
    margin-right: 1%;
    margin-bottom: 1%;
}
.pr_img img {
    display: inline-block;
    width: 100%;
    height: auto;
}

#viewprofilebutton {
    position: relative;
    left: -75px;
    margin-left: 50%;
    margin-top: 3.5%;
    margin-bottom: 2.5%;
    padding: 20px;
    background-color: #000;
    text-decoration: none;
    border: none;
    color: #FFF;
    text-transform: uppercase;}

I started by getting rid of the floats in the title, #ss_top, you don't need it.

For the #projects panel with the images, floats are getting you into trouble with
centering.

On #pr_one and #pr_two, add text-align: center and then use display: inline-block on .pr_img, this will center align your images (give/take some margins), and then apply a suitable width of say 30% so that the images auto scale to form a row of three.

The trick now is to apply display: inline-block to the images (.pr_img img) so you
can now use margins to control top/bottom/left/right spacing.

See demo at: http://jsfiddle.net/audetwebdesign/rmtpy6t0/

Note: You still have some polishing up to do but at least this clarifies the issues related to centering and floated elements.

Responsive Design: If you want 2 or 3 images in a row depending on the screen size, you need to learn about media queries. However, because you wrapped 3 images in a div, you are locked into 3 per row, but that may be okay.

Positioning text and image as centered horizontally using position: relative

You can use flexbox to align items horizontally center by adding below code to the parent div

.parent{
   display:flex;
   align-items: center;
}

This is the running Snippet of your code having this changes

   
    
    body{           padding: 0;           margin: 0;           font-family: arial;        }  .content{       display: flex;       align-items: center;    }
.right-text {        font-size: 13px;    }
    .icon {        width: 32px;        height: 32px;        background: url("https://i.imgur.com/VXlnn8a.png");    }
.left-text {        font-size: 13px;        font-weight: 700;    }

        <div class="content">           <div class="right-text">Right</div>           <div class="icon"></div>           <div class="left-text">Left</div>        </div>

Center position: relative div

You can try this to center a relative element :

.spinner {
    left: 50%;
    margin-left: -12.5em;
}

How to center absolute element with flex?

Update: you can achieve this using margin as well or position relative

body{  background:tomato;}.block{  position:relative;  width:100%;  background:white;  padding:30px 10px 50px 10px;  display:flex;  align-items: center;  justify-content: center;}.block-item{  width:60px;  height:60px;  position:relative;}
.block-item:nth-of-type(1){  background:lightgreen;  left:0;}.block-item:nth-of-type(2){    left: -2%;    top: 20px;    background: lightblue;}.block-item:nth-of-type(3){  left: -5%;  background:lightgray;}

<div id="main">    <div class="block">      <div class="block-item"></div>            <div class="block-item"></div>            <div class="block-item"></div>    </div>  </div>

Center image with position relative in small screen

well the image itself is not centered, as it uses :

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 0;
}

You can center it horizontally, within the div by using:

.memberBoxImage img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

If you want to make sure it doesn't become bigger than the container, you could throw in width: 100%;.