JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="outer">
    <div class="inner">Here is some content that is so long, it's wider than the container</div>
</div>

CSS

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
    box-sizing: border-box;
}

.outer {
    border: 2px solid blue;
    width: 200px;
    height: 200px;
    
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
}

.inner {
    border: 2px solid red;
    display: inline-block;
    
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* Technique 1 - inline-block on inner div with text-align: center on outer div

.outer {
    text-align: center;
}

.inner {
    display: inline-block;
}

*/

/* Technique 2 - margin: auto on inner div 

.outer {
}

.inner {
    margin: auto;
}

*/

/* Technique 3 - position: absolute with left: 50% and translateX(-50%)

.outer {
    position: relative;
}

.inner {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
}
 */

JavaScript

/**
    Various ways of centering an element horizontally or vertically
*/